/* Vulco rezervacije: videz po predlogu (nacrt/videz/obrazec-predlog.html), omejen na .vulco-rez, da ne vpliva na temo.
   Barve iz vzora povpraševanja: ozadje #f0f1f3, gumb #496aaf. Pisava se podeduje iz teme (font-family: inherit). */
.vulco-rez { --vr-modra: #496aaf; --vr-modra-temna: #3b588f; --vr-ak: #002854; --vr-na-ak: #ffffff; --vr-ak-temna: #002042; --vr-ak-svetla: #e6edf5; --vr-krog: #ffcd00; --vr-tick: #002854; --vr-g-ak: #ffcd00; --vr-g-na: #002854; --vr-g-obroba: #002854; --vr-g-temna: #e6b800; --vr-siv-rob: #5f6670; --vr-fokus: #1d1f23; --vr-ozadje: #f0f1f3; --vr-bela: #ffffff; --vr-tekst: #1d1f23; --vr-siva: #8b8f96; --vr-crta: #c9ccd2; --vr-zaseden: #b9bcc2;
  box-sizing: border-box; max-width: 940px; margin: 0 auto; padding: 24px 16px 40px; background: var(--vr-ozadje); color: var(--vr-tekst); font-family: inherit; font-size: 16px; line-height: 1.4; }
.vulco-rez *, .vulco-rez *::before, .vulco-rez *::after { box-sizing: border-box; }
.vulco-rez h2 { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; margin: 0 0 16px; }
.vulco-rez .vr-st { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vr-ak); color: var(--vr-na-ak); font-size: 16px; font-weight: 700; }
.vulco-rez .vr-korak { margin: 0 0 32px; }
.vulco-rez .vr-podnaslov { text-align: center; color: #50545b; margin: 0 0 16px; }
.vulco-rez .vr-sporocilo { max-width: 520px; margin: 12px auto; padding: 10px 14px; background: var(--vr-bela); border-left: 4px solid var(--vr-ak); }
.vulco-rez .vr-sporocilo.vr-napaka { border-left-color: #b32d2e; }
.vulco-rez .vr-sporocilo.vr-uspeh { border-left-color: #2e7d32; }

/* TESTNI NAČIN (samo lokalni preizkus brez Googla): velik rdeč napis */
.vulco-testni { box-sizing: border-box; max-width: 940px; margin: 0 auto 12px; padding: 14px 16px; background: #b32d2e; color: #fff; font-size: 20px; font-weight: 700; text-align: center; letter-spacing: 0.5px; }

/* koledar */
.vulco-rez .vr-koledar { max-width: 460px; margin: 0 auto; background: var(--vr-bela); border: 1px solid var(--vr-crta); padding: 12px; }
.vulco-rez .vr-glava { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; }
.vulco-rez .vr-puscica { width: 40px; height: 40px; border: 1px solid var(--vr-crta); background: var(--vr-bela); color: var(--vr-ak); font-size: 18px; cursor: pointer; }
.vulco-rez .vr-puscica:disabled { color: var(--vr-zaseden); cursor: not-allowed; }
.vulco-rez .vr-mreza { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.vulco-rez .vr-dn { text-align: center; font-size: 12px; color: var(--vr-siva); padding: 4px 0; }
.vulco-rez .vr-dan { min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--vr-crta); background: var(--vr-bela); color: var(--vr-tekst); font: inherit; font-size: 15px; }
.vulco-rez button.vr-dan { cursor: pointer; }
.vulco-rez button.vr-dan:hover { border-color: var(--vr-ak); }
.vulco-rez .vr-dan.vr-izbran { background: var(--vr-ak); border-color: var(--vr-ak); color: var(--vr-na-ak); font-weight: 700; }
.vulco-rez .vr-dan.vr-brez { background: #f3f3f4; color: var(--vr-zaseden); border-color: #ececee; }
.vulco-rez .vr-dan.vr-prazen { border-color: transparent; background: transparent; }
.vulco-rez .vr-legenda { max-width: 460px; margin: 8px auto 0; font-size: 13px; color: #50545b; text-align: center; }

/* ure */
.vulco-rez .vr-ure { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 520px; margin: 0 auto; }
.vulco-rez .vr-ure h3 { margin: 0 0 8px; font-size: 16px; text-align: center; }
.vulco-rez .vr-seznam { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vulco-rez .vr-termin { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--vr-ak); background: var(--vr-bela); color: var(--vr-ak); font: inherit; font-size: 16px; cursor: pointer; }
.vulco-rez .vr-termin:hover { background: var(--vr-ak-svetla); }
.vulco-rez .vr-termin.vr-izbran { background: var(--vr-ak); color: var(--vr-na-ak); font-weight: 700; }
.vulco-rez .vr-termin:disabled { border-color: var(--vr-crta); background: #f3f3f4; color: var(--vr-zaseden); cursor: not-allowed; }
.vulco-rez .vr-termin:disabled .vr-ura { text-decoration: line-through; }
.vulco-rez .vr-zaseden { font-size: 12px; color: var(--vr-siva); }
.vulco-rez .vr-opozorilo { max-width: 520px; margin: 14px auto 0; font-size: 14px; color: #50545b; text-align: center; }

/* obrazec */
.vulco-rez .vr-povzetek { width: fit-content; max-width: 100%; margin: 0 auto 16px; padding: 10px 14px; background: var(--vr-bela); border-left: 4px solid var(--vr-ak); font-size: 15px; }
.vulco-rez form { max-width: 840px; margin: 0 auto; }
.vulco-rez .vr-vrsta { display: grid; gap: 16px; margin-bottom: 14px; }
.vulco-rez .vr-dve { grid-template-columns: 1fr 1fr; }
.vulco-rez .vr-tri { grid-template-columns: 1fr 1fr 1fr; }
.vulco-rez .vr-polje { display: flex; flex-direction: column; }
.vulco-rez .vr-polje > label, .vulco-rez .vr-skupina > legend { font-weight: 700; font-size: 15px; text-align: center; margin-bottom: 4px; }
.vulco-rez select, .vulco-rez input[type=text], .vulco-rez input[type=email], .vulco-rez input[type=tel], .vulco-rez textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--vr-crta); background: var(--vr-bela); color: var(--vr-tekst); font: inherit; font-size: 15px; border-radius: 0; }
.vulco-rez textarea { min-height: 88px; resize: vertical; }
.vulco-rez select:focus, .vulco-rez input:focus, .vulco-rez textarea:focus, .vulco-rez button:focus-visible { outline: 3px solid var(--vr-fokus); outline-offset: 2px; }
.vulco-rez .vr-skupina { border: 0; padding: 0; margin: 0 0 14px; }
/* Gumbi (1.1.5): barve Vulco (mornarska #002854 + rumena #FFCD00) in siva. BARVA JE NA ENEM MESTU: spremenljivke --vr-ak (podlaga izbranega), --vr-ak-temna, --vr-ak-svetla, --vr-na-ak (pisava in krogec na podlagi), --vr-siv-rob. Izbire so široke toliko kot besedilo (tabletke), ena ob drugi, na telefonu se prelomijo.
   Kontrasti (WCAG 2.1): neizbrano besedilo 16.5, siv rob 5.8; izbrano bela na mornarski 14.7; kljukica 9.8; glavni gumb temno modra na rumeni 9.8; fokus črn okvir 16.5; onemogočen 5.9. Glavni gumb (--vr-g-*) je rumen kot gumb na glavi Vulco. */
.vulco-rez .vr-gume { display: flex; flex-wrap: wrap; gap: 10px; }
.vulco-rez .vr-izbira { position: relative; display: inline-flex; margin: 0; }
.vulco-rez .vr-izbira input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.vulco-rez .vr-izbira span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 18px 6px 12px; border: 2px solid var(--vr-siv-rob); border-radius: 8px; background: var(--vr-bela); color: var(--vr-tekst); font-size: 16px; line-height: 1.2; cursor: pointer; }
.vulco-rez .vr-izbira span::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--vr-siv-rob); border-radius: 50%; background: var(--vr-bela); }
.vulco-rez .vr-izbira:hover span { background: var(--vr-ak-svetla); border-color: var(--vr-ak); }
.vulco-rez .vr-izbira input:checked + span { background: var(--vr-ak); border-color: var(--vr-ak); color: var(--vr-na-ak); font-weight: 700; }
.vulco-rez .vr-izbira input:checked + span::before { content: "\2713"; display: flex; align-items: center; justify-content: center; border-color: var(--vr-krog); background: var(--vr-krog); color: var(--vr-tick); font-size: 14px; font-weight: 900; line-height: 1; }
.vulco-rez .vr-izbira input:focus-visible + span { outline: 3px solid var(--vr-fokus); outline-offset: 2px; }
.vulco-rez .vr-skupina > legend { text-align: left; }
/* Vrsta vozila na začetku obrazca (1.1.8): središčena izbira nad koraki */
.vulco-rez .vr-vozilo { max-width: 840px; margin: 0 auto 28px; }
.vulco-rez .vr-vozilo > legend { display: block; width: 100%; text-align: center; font-size: 20px; font-weight: 700; margin: 0 0 12px; padding: 0; }
.vulco-rez .vr-vozilo-izbire { justify-content: center; }
.vulco-rez .vr-vozilo .vr-napaka-polja { text-align: center; }
/* Število gum (tovorno vozilo, 1.1.9): enako središčeno kot izbira vozila */
.vulco-rez .vr-gume-st { max-width: 840px; margin: 0 auto 28px; }
.vulco-rez .vr-gume-st[hidden] { display: none; }
.vulco-rez .vr-gume-st > legend { display: block; width: 100%; text-align: center; font-size: 18px; font-weight: 700; margin: 0 0 12px; padding: 0; }
.vulco-rez .vr-gume-st-izbire { justify-content: center; }
.vulco-rez .vr-gume-st .vr-napaka-polja { text-align: center; }
.vulco-rez .vr-locnica { border: 0; border-top: 2px dotted #444; margin: 22px 0; }
.vulco-rez .vr-kljukica { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
.vulco-rez .vr-kljukica input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }
.vulco-rez .vr-pomoc { display: block; font-size: 13px; color: #50545b; }
.vulco-rez .vr-napaka-polja { color: #b32d2e; font-size: 13px; margin-top: 4px; }
.vulco-rez .vr-gumb-vrsta { text-align: center; margin-top: 22px; }
.vulco-rez .vr-gumb { min-width: 220px; min-height: 48px; padding: 10px 28px; border: 2px solid var(--vr-g-obroba); background: var(--vr-g-ak); color: var(--vr-g-na); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.vulco-rez .vr-gumb:hover:not(:disabled) { background: var(--vr-g-temna); }
.vulco-rez .vr-gumb:disabled { background: var(--vr-zaseden); cursor: wait; }
/* brez kljukice soglasja: siv gumb, kurzor not-allowed, kratko pojasnilo pod gumbom */
.vulco-rez .vr-gumb.vr-brez-soglasja:disabled { cursor: not-allowed; }
.vulco-rez .vr-pomoc-gumb { margin: 8px 0 0; font-size: 13px; color: #50545b; }
.vulco-rez .vr-pomoc-gumb[hidden] { display: none; }
.vulco-rez .vr-past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vulco-rez .vr-opomba-odpoved { text-align: center; font-size: 14px; color: #50545b; margin: 10px 0 0; }
.vulco-rez .vr-nalaganje { text-align: center; color: #50545b; }

@media (max-width: 640px) {
  .vulco-rez .vr-dve, .vulco-rez .vr-tri { grid-template-columns: 1fr; }
  .vulco-rez .vr-ure { gap: 16px; }
}

/* Ure terminov in glavni gumb (1.1.3): isti slog kot izbire; onemogočen gumb je svetlo siv s črtkanim robom (drugačen od neizbranih belih). */
.vulco-rez .vr-termin { border: 2px solid var(--vr-siv-rob); border-radius: 8px; color: var(--vr-tekst); }
.vulco-rez .vr-termin:hover { border-color: var(--vr-ak); }
.vulco-rez .vr-termin.vr-izbran { background: var(--vr-ak); border-color: var(--vr-ak); color: var(--vr-na-ak); }
.vulco-rez .vr-termin:disabled { border: 2px solid #d3d6db; background: #eceef1; color: #4f545b; }
.vulco-rez .vr-zaseden { color: #4f545b; }
.vulco-rez .vr-gumb { border-radius: 8px; }
.vulco-rez .vr-gumb:disabled { background: #dfe2e6; color: #4f545b; border: 2px dashed #6b717a; cursor: wait; }
.vulco-rez .vr-gumb.vr-brez-soglasja:disabled { cursor: not-allowed; }

/* Ure terminov (1.1.3): kratke, enake velikosti (tudi zaseden), v vrstah; "zaseden" ostane za bralnike zaslona. Gumb ni čez celo širino. */
.vulco-rez .vr-termin { position: relative; width: 88px; min-width: 0; padding: 0; justify-content: center; }
.vulco-rez .vr-termin .vr-zaseden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vulco-rez .vr-gumb { min-width: 0; padding: 10px 36px; }

/* Vprašanje "že v skladišču" se pri novih gumah ne postavi (1.1.11) */
.vulco-rez .vr-dane[hidden] { display: none; }

/* Pravila rezervacije (1.1.13): zložljiv razdelek pod izbiro vozila */
.vulco-rez .vr-pravila { max-width: 840px; margin: 0 auto 24px; background: var(--vr-bela); border-left: 4px solid var(--vr-ak); padding: 10px 14px; }
.vulco-rez .vr-pravila > summary { cursor: pointer; font-weight: 700; font-size: 16px; min-height: 28px; }
.vulco-rez .vr-pravila ul { margin: 10px 0 2px; padding-left: 20px; }
.vulco-rez .vr-pravila li { font-size: 15px; line-height: 1.45; margin: 0 0 6px; }

/* Izpolnjena polja (359; Gregor 4. 10. 11:18 "a" = rumena podlaga + temno modra obroba). Razred vr-izpolnjeno dodaja vulco.js; obveznosti, besedila in razporeditev se ne spreminjajo.
   Kontrast: besedilo (#1d1f23) na rumeni (#fff6cc) 15,2:1; obroba (#002854) na rumeni 13,5:1. */
.vulco-rez .vr-polje.vr-izpolnjeno input, .vulco-rez .vr-polje.vr-izpolnjeno select, .vulco-rez .vr-polje.vr-izpolnjeno textarea { background: #fff6cc; border: 2px solid var(--vr-ak); }
.vulco-rez fieldset.vr-skupina.vr-izpolnjeno { background: #fff6cc; border-left: 4px solid var(--vr-ak); padding: 8px 10px 10px; }
.vulco-rez fieldset.vr-skupina.vr-izpolnjeno > legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; }
.vulco-rez fieldset.vr-skupina.vr-izpolnjeno > legend + * { clear: both; }
/* Tovorno: ure, ki jih izbrana rezervacija zasede (od začetka do konca, tudi čez odmor), so pobarvane; začetna ura ostane temno modra (vr-izbran). Onemogočene ure, ki so del trajanja, niso prečrtane. */
.vulco-rez .vr-termin.vr-zajeto, .vulco-rez .vr-termin.vr-zajeto:disabled { background: #fff6cc; border: 2px solid var(--vr-ak); color: var(--vr-ak); font-weight: 700; cursor: default; }
.vulco-rez .vr-termin.vr-zajeto .vr-ura, .vulco-rez .vr-termin.vr-zajeto:disabled .vr-ura { text-decoration: none; }
.vulco-rez .vr-termin.vr-zajeto .vr-zaseden { display: none; }

/* "Koliko gum kupite?" (1.3.6; Gregor 6. 10.): gumbi s številkami 1-4 (osebno, kombi) ali 1-10 (tovorno), ob izbiri pobarvani kot ostale izbire. */
.vulco-rez .vr-kolicina[hidden] { display: none; }
.vulco-rez .vr-kolicina-izbire { gap: 8px; }
.vulco-rez .vr-kolicina .vr-izbira span { min-width: 52px; justify-content: center; padding: 6px 12px; font-size: 18px; }
.vulco-rez .vr-kolicina .vr-izbira span::before, .vulco-rez .vr-kolicina .vr-izbira input:checked + span::before { display: none; }

/* Stran servisa za odgovor o novih gumah (1.3.6): povzetek, izbira Gume so | Gum ni, polja po izbiri. */
.vulco-rez .vr-gume-odgovor { max-width: 560px; margin: 0 auto; }
.vulco-rez .vr-gume-povzetek div { margin: 2px 0; }
.vulco-rez .vr-gume-izbire { justify-content: center; margin: 0 0 16px; }
.vulco-rez .vr-gume-polje { margin: 0 0 12px; }
.vulco-rez .vr-gume-polje[hidden], .vulco-rez .vr-gume-odgovor .vr-gumb[hidden] { display: none; }
.vulco-rez .vr-gume-polje .vr-pomoc { margin-top: 4px; }