/* GHIA PRO — javni konfigurator. Boje kao na memorandumu. */
[hidden] { display: none !important; }
:root {
  --marka-siva:#5f6165; --marka-zuta:#f5b301; --zuta-blijeda:#fff6e0;
  --navy:#1b2a3a; --tekst:#1e2a35; --tiho:#6b7a8c; --rub:#dbe3ec; --rub-jaci:#c3cfdc;
  --pozadina:#eef2f7; --zelena:#1f9254; --crvena:#b3261e;
  --sjena:0 1px 2px rgba(27,42,58,.06), 0 2px 10px rgba(27,42,58,.06);
  --radijus:12px;
}
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--tekst); background:var(--pozadina); -webkit-font-smoothing:antialiased; }

header { display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:16px 30px; background:#fff; border-bottom:1px solid var(--rub); }
.marka { font-size:23px; font-weight:800; letter-spacing:-.5px; }
.marka .g { color:var(--marka-siva); } .marka .p { color:var(--marka-zuta); }
.kontakt { margin-left:auto; font-size:13.5px; color:var(--tiho); }
.kontakt a { color:var(--navy); }

main { max-width:1240px; margin:32px auto 60px; padding:0 24px; }
h1 { font-size:29px; margin:0 0 8px; letter-spacing:-.4px; }
.uvod { color:var(--tiho); margin:0 0 26px; max-width:620px; }

.raspored { display:grid; grid-template-columns:1fr 400px; gap:26px; align-items:start; }
.korak { background:#fff; border:1px solid var(--rub); border-radius:var(--radijus);
  padding:20px 24px; margin-bottom:18px; box-shadow:var(--sjena); }
.korak h2 { font-size:17px; margin:0 0 6px; display:flex; align-items:center; gap:11px; }
.korak .broj { width:26px; height:26px; border-radius:50%; background:var(--marka-zuta);
  color:#22303d; font-size:14px; display:flex; align-items:center; justify-content:center;
  font-weight:800; flex-shrink:0; }
.pomoc { color:var(--tiho); font-size:13.5px; margin:0 0 14px; }

.izbor { display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:12px; }
.izbor.uzi { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.kartica { border:2px solid var(--rub); border-radius:10px; padding:14px 16px; cursor:pointer;
  background:#fff; transition:border-color .12s, background .12s; }
.kartica:hover { border-color:var(--rub-jaci); background:#fbfdff; }
.kartica.odabran { border-color:var(--marka-zuta); background:var(--zuta-blijeda); }
.kartica .ime { font-weight:700; font-size:14.5px; }
.kartica .dim { color:var(--tiho); font-size:12.5px; margin-top:2px; }
.kartica .opis { color:var(--tiho); font-size:12.5px; margin-top:7px; line-height:1.5; }
.kartica .cij { margin-top:9px; font-weight:800; color:var(--navy); font-size:15px; }
.kartica .cij small { font-weight:600; color:var(--tiho); font-size:11.5px; }

.pilule { display:flex; gap:8px; flex-wrap:wrap; }
.pilule button { border:1px solid var(--rub-jaci); background:#fff; color:var(--tiho);
  border-radius:20px; padding:8px 18px; font:inherit; font-size:14px; cursor:pointer; }
.pilule button.odabran { background:var(--navy); color:#fff; border-color:var(--navy); }

table { width:100%; border-collapse:collapse; margin-top:14px; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tiho); padding:8px 6px; border-bottom:1px solid var(--rub); }
td { padding:9px 6px; border-bottom:1px solid #eef3f8; font-size:14px; }
td.d, th.d { text-align:right; }
tr:last-child td { border-bottom:none; }
select { font:inherit; font-size:13.5px; padding:5px 8px; border:1px solid var(--rub-jaci);
  border-radius:6px; background:#fff; }
.makni { background:none; border:none; color:var(--crvena); font-size:17px; cursor:pointer;
  padding:0 4px; }

.pregled { background:#fff; border:1px solid var(--rub); border-radius:var(--radijus);
  padding:20px 22px; box-shadow:var(--sjena); position:sticky; top:22px; }
.pregled h2 { font-size:16px; margin:0 0 14px; }
#crtezi { background:var(--pozadina); border-radius:9px; padding:10px; margin-bottom:12px; }
#crtezi svg { max-width:100%; height:auto; display:block; margin:0 auto; }
#crtezi .stranice { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.prostorijeTraka { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.prostorijeTraka span { background:var(--pozadina); border-radius:6px; padding:4px 9px;
  font-size:12px; color:var(--tiho); }
#stavke td { font-size:13.5px; padding:6px 4px; }
.zbroj { border-top:2px solid var(--navy); margin-top:12px; padding-top:12px; }
.zbroj div { display:flex; justify-content:space-between; padding:3px 0; font-size:14px; }
.zbroj .veliko { font-size:19px; font-weight:800; margin-top:6px; }
.napomena { font-size:12px; color:var(--tiho); margin:12px 0 16px; line-height:1.5; }

button { font:inherit; font-size:15px; font-weight:700; padding:11px 20px; border-radius:9px;
  cursor:pointer; border:1px solid var(--marka-zuta); background:var(--marka-zuta);
  color:#22303d; }
button:hover { filter:brightness(1.07); }
button:disabled { opacity:.45; cursor:default; filter:none; }
button.tiho { background:none; border:none; color:var(--tiho); font-size:22px; padding:0 6px; }
#posaljiUpit { width:100%; padding:13px; font-size:16px; }

#zastor { position:fixed; inset:0; background:rgba(20,30,42,.55); z-index:60; }
#obrazac { position:fixed; z-index:61; top:50%; left:50%; transform:translate(-50%,-50%);
  width:460px; max-width:calc(100vw - 28px); max-height:90vh; background:#fff;
  border-radius:var(--radijus); box-shadow:0 18px 50px rgba(15,25,40,.3);
  display:flex; flex-direction:column; overflow:hidden; }
.obrazacVrh { display:flex; align-items:center; padding:16px 22px;
  border-bottom:1px solid var(--rub); }
.obrazacVrh h2 { margin:0; font-size:17px; }
.obrazacVrh button { margin-left:auto; }
.obrazacTijelo { padding:18px 22px 24px; overflow-y:auto; }
label { display:block; margin:12px 0; font-size:13px; font-weight:600; color:var(--tiho); }
input, textarea { display:block; width:100%; margin-top:5px; padding:10px 12px; font:inherit;
  font-size:15px; font-weight:400; color:var(--tekst); border:1px solid var(--rub-jaci);
  border-radius:8px; }
input:focus, textarea:focus { outline:none; border-color:var(--marka-zuta);
  box-shadow:0 0 0 3px rgba(245,179,1,.18); }
textarea { resize:vertical; }
.akcije { display:flex; align-items:center; gap:14px; margin-top:18px; }
#obrazacPoruka { font-size:13.5px; color:var(--crvena); }

#hvala { position:fixed; inset:0; z-index:70; background:var(--pozadina);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.hvalaOkvir { background:#fff; border:1px solid var(--rub); border-radius:var(--radijus);
  padding:44px 40px; text-align:center; max-width:440px; box-shadow:var(--sjena); }
.kvaka { width:56px; height:56px; border-radius:50%; background:var(--zelena); color:#fff;
  font-size:29px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.hvalaOkvir h2 { margin:0 0 10px; }
.hvalaOkvir button { margin-top:18px; }

footer { text-align:center; padding:26px; color:var(--tiho); font-size:13px;
  border-top:1px solid var(--rub); background:#fff; }
footer a { color:var(--navy); }

@media (max-width:960px) {
  .raspored { grid-template-columns:1fr; }
  .pregled { position:static; }
  header { padding:14px 18px; } main { padding:0 16px; }
  .kontakt { margin-left:0; width:100%; }
}

/* ---------- skiciranje: povlačenje, duljine prostorija ---------- */
.pomocCrtez { margin: 0 0 8px; color: #7b8794; font-size: 12.5px; }
.oblacic {
  position: fixed; z-index: 60; pointer-events: none;
  padding: 4px 9px; border-radius: 6px; background: #1b2a3a; color: #fff;
  font-size: 12px; white-space: nowrap;
}
svg .otvor, svg .pregrada { cursor: grab; }
svg [data-oznaka] { pointer-events: none; }
input.mm {
  width: 92px; padding: 5px 7px; text-align: right;
  border: 1px solid var(--rub, #dbe3ec); border-radius: 6px; font: inherit; font-size: 13px;
}
#popisProstorija { margin-top: 12px; }
.savjet {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 8px;
  background: #fff6e0; color: #6a5300; font-size: 13px;
}
.upozorenje {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 8px;
  background: #fdecec; color: #8a1f1f; font-size: 13px;
}