/* Mobilab, predložak mobilab2: spoj dizajna demoa s Joomlom.
   pc/style.css i mob/style.css su DOSLOVNE kopije demoa (ne mijenjati), sve prilagodbe su ovdje. */

/* ---------- računalo ili mobitel: vidi se samo jedan raspored ---------- */
.ml2-mob{display:none}
@media (max-width:899px){.ml2-pc{display:none}.ml2-mob{display:block}}
.ml2-pool{display:none!important}
.ml2-msg:empty{display:none}
.ml2-msg{position:relative;z-index:80}
.ml2-msg joomla-alert{margin:0}

/* ---------- Balbooa obrasci u izgledu demoa (preko Balbooinih CSS varijabli) ---------- */
.ml2 .ml2-bf .com-baforms-wrapper{margin:0}
.ml2 .ml2-bf form[class*="ba-form-"]{
  --form-background-color:transparent;--form-padding-top:0;--form-padding-right:0;--form-padding-bottom:0;--form-padding-left:0;
  --form-border-top:0;--form-border-right:0;--form-border-bottom:0;--form-border-left:0;--form-shadow-value:0;
  --field-margin-top:0;--field-margin-bottom:.9rem;
  --field-border-top:1;--field-border-right:1;--field-border-bottom:1;--field-border-left:1;--field-border-width:1.5px;
  --field-padding-top:.9rem;--field-padding-right:1rem;--field-padding-bottom:.9rem;--field-padding-left:1rem;
  --field-typography-font-size:1rem;--field-typography-line-height:1.4;--field-typography-font-weight:400;--field-typography-letter-spacing:0;
  --label-typography-font-size:.72rem;--label-typography-line-height:1.2;--label-typography-font-weight:700;--label-typography-text-transform:uppercase;--label-typography-text-align:left;
  display:block;gap:0;margin:0;padding:0;width:100%;
}
.ml2 .ml2-bf .ba-form-page,.ml2 .ml2-bf .ba-page-items,.ml2 .ml2-bf .ba-form-row,.ml2 .ml2-bf .ba-form-column-wrapper,.ml2 .ml2-bf .ba-form-column{padding:0!important;margin:0!important;width:100%;background:none;border:0;box-shadow:none}
.ml2 .ml2-bf .ba-form-headline-field{display:none}
.ml2 .ml2-bf .ba-form-field-item:not(.hidden-condition-field):not([data-hidden="true"]){margin:0 0 var(--field-margin-bottom)!important}
.ml2 .ml2-bf .ba-field-label-wrapper{display:flex;gap:.3rem;align-items:baseline;margin:0 0 .4rem;padding:0;float:none;width:100%}
.ml2 .ml2-bf .ba-input-label-wrapper{letter-spacing:var(--ml2-ls,.12em)}
.ml2 .ml2-bf .required-star{color:var(--ml2-accent);font-size:.8rem}
.ml2 .ml2-bf .ba-field-container input[type=text],.ml2 .ml2-bf .ba-field-container input[type=email],.ml2 .ml2-bf .ba-field-container textarea{transition:border-color .2s,box-shadow .2s,background-color .2s}
.ml2 .ml2-bf .ba-field-container textarea{resize:vertical;min-height:110px}
.ml2 .ml2-bf fieldset.ba-input-wrapper{border:0;padding:0;margin:0;min-width:0}
.ml2 .ml2-bf legend.ba-field-label-wrapper{float:left}
/* radio i checkbox kao "čipovi" (kao u demou) */
.ml2 .ml2-bf .ba-form-checkbox-group-wrapper{display:flex!important;flex-wrap:wrap;gap:.5rem;clear:both}
.ml2 .ml2-bf .ba-form-checkbox-wrapper{position:relative;display:inline-flex;margin:0!important;width:auto!important;padding:0!important}
.ml2 .ml2-bf .ba-checkbox-wrapper{position:static;display:block;padding:0!important;margin:0!important;min-height:0!important}
.ml2 .ml2-bf .ba-checkbox-title{display:block;padding:.62rem 1rem;border:1.5px solid var(--ml2-line);border-radius:var(--ml2-r);background:var(--ml2-field);font-size:.92rem;font-weight:600;line-height:1.2;color:var(--ml2-ink);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;-webkit-user-select:none;user-select:none}
.ml2 .ml2-bf .ba-form-checkbox-title{font:inherit!important;color:inherit!important;letter-spacing:0!important;text-transform:none!important}
.ml2 .ml2-bf .ba-form-radio,.ml2 .ml2-bf .ba-form-checkbox{position:absolute!important;inset:0;margin:0!important;cursor:pointer;z-index:1}
.ml2 .ml2-bf .ba-form-radio input,.ml2 .ml2-bf .ba-form-checkbox input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0;margin:0!important;cursor:pointer}
.ml2 .ml2-bf .ba-form-radio span,.ml2 .ml2-bf .ba-form-checkbox>span{display:none!important}
.ml2 .ml2-bf .ba-form-radio-field .ba-form-checkbox-wrapper:has(input:checked) .ba-checkbox-title{background:var(--ml2-ink);border-color:var(--ml2-ink);color:#fff}
.ml2 .ml2-bf .ba-form-checkbox-field .ba-form-checkbox-wrapper:has(input:checked) .ba-checkbox-title{background:var(--ml2-accent);border-color:var(--ml2-accent);color:#fff}
.ml2 .ml2-bf .ba-form-checkbox-wrapper:has(input:focus-visible) .ba-checkbox-title{outline:2px solid var(--ml2-accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ml2 .ml2-bf .ba-form-checkbox-wrapper:hover .ba-checkbox-title{border-color:var(--ml2-ink)}}
/* telefon s pozivnim brojem (obrazac Kontakt) */
.ml2 .ml2-bf .ba-phone-countries-wrapper{border:1.5px solid var(--ml2-line);border-right:0;border-radius:var(--ml2-r) 0 0 var(--ml2-r);background:var(--ml2-field)}
.ml2 .ml2-bf .ba-form-phone-field .ba-field-container{display:flex}
.ml2 .ml2-bf .ba-form-phone-field .ba-phone-number-input{border-radius:0 var(--ml2-r) var(--ml2-r) 0}
/* gumb za slanje */
.ml2 .ml2-bf .ba-form-submit-field{margin:.4rem 0 0!important}
.ml2 .ml2-bf .ba-form-submit-wrapper{--submit-padding-top:0!important;--submit-padding-right:0!important;--submit-padding-bottom:0!important;--submit-padding-left:0!important;--submit-shadow-value:0!important;--submit-border-top:0!important;--submit-border-right:0!important;--submit-border-bottom:0!important;--submit-border-left:0!important;--submit-typography-text-align:flex-start!important}
.ml2 .ml2-bf .ba-form-submit-btn-wrapper{justify-content:flex-start!important}
.ml2 .ml2-bf .ba-form-submit-btn>i{display:none!important}
.ml2 .ml2-bf .ba-form-submit-btn{flex-grow:0!important;text-decoration:none!important}
.ml2 .ml2-bf .ba-form-submit-btn::after{content:"";width:1rem;height:1rem;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s}
.ml2 .ml2-bf .ba-form-submit-btn::after{position:static!important;inset:auto!important;transform:none!important;opacity:1!important;display:block!important}
.ml2-pc .ml2-bf .ba-form-submit-btn::after{background:currentColor!important}
.ml2 .ml2-bf .ba-form-submit-btn:hover::after{transform:translateX(3px)!important}

/* računalo (Demo 2): isti izgled kao form u pc/style.css */
.ml2-pc .ml2-bf{--ml2-line:var(--line);--ml2-ink:var(--ink);--ml2-accent:var(--red);--ml2-r:var(--r);--ml2-field:#fff}
.ml2-pc .ml2-bf form[class*="ba-form-"]{
  --field-background-color:#fff;--field-border-color:var(--line);--field-border-radius:var(--r);
  --field-typography-font-family:var(--fb);--field-typography-color:var(--ink);
  --label-typography-font-family:var(--fd);--label-typography-color:var(--mute);--theme-color:var(--red);
}
.ml2-pc .ml2-bf .ba-field-container input:focus,.ml2-pc .ml2-bf .ba-field-container textarea:focus{border-color:var(--ink)!important;outline:none}
.ml2-pc .ml2-bf .ba-checkbox-title{font-family:var(--fb)}
.ml2-pc .ml2-bf .ba-form-submit-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:.6rem;padding:1.05rem 1.6rem!important;border-radius:var(--r)!important;background:var(--red)!important;color:#fff!important;font-family:var(--fd)!important;font-weight:700!important;font-size:.92rem!important;letter-spacing:.06em!important;text-transform:uppercase!important;line-height:1!important;white-space:nowrap}
.ml2-pc .ml2-bf .ba-form-submit-btn:hover{background:var(--ink)!important}

/* mobitel (Verzija 2): isti izgled kao form u mob/style.css */
.ml2-mob .ml2-bf{--ml2-line:var(--line-2);--ml2-ink:var(--ink);--ml2-accent:var(--c1);--ml2-r:999px;--ml2-field:var(--bg);--ml2-ls:.14em}
.ml2-mob .ml2-bf form[class*="ba-form-"]{
  --field-background-color:var(--bg);--field-border-color:var(--line-2);--field-border-radius:var(--r-md);
  --field-typography-font-family:var(--fb);--field-typography-color:var(--ink);--field-typography-font-weight:500;--field-typography-font-size:16px;
  --label-typography-font-family:var(--fd);--label-typography-color:var(--mute);--theme-color:var(--c1);
  --field-margin-bottom:.75rem;
}
.ml2-mob .ml2-bf .ba-input-label-wrapper{font-size:.64rem}
.ml2-mob .ml2-bf .ba-field-container input:focus,.ml2-mob .ml2-bf .ba-field-container textarea:focus{border-color:var(--violet)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(var(--c1r),.14)!important;outline:none}
.ml2-mob .ml2-bf .ba-checkbox-title{padding:.55rem .85rem;font-size:.82rem}
.ml2-mob .ml2-bf .ba-form-submit-btn-wrapper,.ml2-mob .ml2-bf .ba-form-submit-btn{width:100%}
.ml2-mob .ml2-bf .ba-form-submit-btn{display:flex!important;align-items:center;justify-content:space-between!important;gap:.9rem;padding:.4rem .4rem .4rem 1.4rem!important;min-height:3.3rem;border-radius:999px!important;background:linear-gradient(135deg,var(--c2),var(--d1))!important;color:#fff!important;font-family:var(--fd)!important;font-weight:600!important;font-size:.95rem!important;letter-spacing:0!important;text-transform:none!important;line-height:1!important;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 18px 40px -18px rgba(var(--c1r),.75)!important}
.ml2-mob .ml2-bf .ba-form-submit-btn::after{width:2.5rem;height:2.5rem;border-radius:999px;-webkit-mask:none;mask:none;background:rgba(255,255,255,.18) center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 36 36' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")!important}
/* obrazac otkupa na mobitelu kao zasebna stranica: isti okvir kao u demou */
html.otk-open .ml2-mob .otk-page .otk-form.ml2-bf{background:#fff;border-radius:22px;padding:1.2rem 1rem;display:block}

/* poruka nakon slanja (Balbooa skočni prozor) */
.ba-form-message-popup{--form-border-radius:14px}

/* ---------- karta: učitava se tek uz pristanak ili klik ---------- */
[data-map]{display:grid;place-items:center}
[data-map] iframe{grid-area:1/1}
.ml2-mapbtn{font:inherit;font-weight:700;font-size:.85rem;padding:.8rem 1.2rem;border:1.5px solid currentColor;border-radius:999px;background:rgba(255,255,255,.85);color:#12102A;cursor:pointer}
.ml2-pc .ml2-mapbtn{border-radius:var(--r);font-family:var(--fd);letter-spacing:.06em;text-transform:uppercase}

/* ---------- obavijest o kolačićima ---------- */
.ml2-cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:90;max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;padding:1rem 1.1rem;border-radius:14px;background:#111114;color:#fff;box-shadow:0 24px 60px -24px rgba(0,0,0,.6);font:500 .9rem/1.45 'IBM Plex Sans',system-ui,sans-serif}
.ml2-cookie[hidden]{display:none}
.ml2-cookie p{margin:0;flex:1 1 260px}
.ml2-cookie div{display:flex;gap:.5rem;flex:none}
.ml2-cookie button{font:inherit;font-weight:700;padding:.6rem 1rem;border-radius:10px;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer}
.ml2-cookie .ml2-ck-ok{background:#E3352E;border-color:#E3352E}
@media (max-width:899px){.ml2-cookie{bottom:calc(var(--tab-h,64px) + 1.4rem + env(safe-area-inset-bottom))}}

/* ---------- cjenik kao tablica (iPhone, iPad) ---------- */
.ml2-cjt{position:fixed;inset:0;z-index:95;background:#fff;display:flex;flex-direction:column;font:400 .88rem/1.35 'IBM Plex Sans',system-ui,sans-serif;color:#111114}
.ml2-cjt[hidden]{display:none}
html.ml2-cjt-open,html.ml2-cjt-open body{overflow:hidden}
.ml2-cjt-bar{display:flex;align-items:center;justify-content:space-between;padding:calc(.8rem + env(safe-area-inset-top)) 1rem .8rem;border-bottom:1px solid #e5e5ea;font-size:1rem}
.ml2-cjt-bar button{font:inherit;font-size:1.6rem;line-height:1;width:2.4rem;height:2.4rem;border:0;border-radius:999px;background:#f2f2f5;cursor:pointer}
.ml2-cjt-body{overflow:auto;-webkit-overflow-scrolling:touch;flex:1;padding:0 0 2rem}
.ml2-cjt table{border-collapse:collapse;width:100%;min-width:640px}
.ml2-cjt th,.ml2-cjt td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid #eee;vertical-align:top}
.ml2-cjt th{position:sticky;top:0;background:#fafafa;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.ml2-cjt td:nth-child(n+4){white-space:nowrap;text-align:right}
.ml2-cjt-note{padding:1rem;color:#666}

/* ---------- ostale Joomla stranice (članak i sl.) ---------- */
.ml2-page{min-height:40vh}
.ml2-page h1,.ml2-page h2{margin:0 0 1rem}
.ml2-page p{margin:0 0 1rem;max-width:72ch}

/* ---------- stranica greške ---------- */
.ml2-err{min-height:100vh;display:grid;place-content:center;justify-items:start;gap:1rem;padding:2rem 1.25rem;max-width:560px;margin:0 auto;font-family:'IBM Plex Sans',system-ui,sans-serif;color:#111114}
.ml2-err h1{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(2rem,6vw,3rem);line-height:1;margin:0;color:#111114} /* style.css demoa daje h1 bijelu boju (za tamni uvod) */
.ml2-err-code{font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:1rem;letter-spacing:.14em;color:#E3352E;margin:1rem 0 0}
.ml2-err-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.ml2-err-btn{display:inline-flex;padding:.9rem 1.3rem;border-radius:8px;background:#E3352E;color:#fff;font-weight:700;text-decoration:none}
.ml2-err-line{background:none;color:#111114;border:1.5px solid #111114}

/* ---------- cjenik za preuzimanje: CSS demoa stilizira "button", a poveznice su "a" (ista pravila, za a) ---------- */
.ml2-pc .dl-b a{padding:.46rem .85rem;font-family:var(--fd);font-weight:700;font-size:.78rem;letter-spacing:.08em;color:var(--ink-2);cursor:pointer;transition:background-color .2s var(--eo),color .2s var(--eo)}
.ml2-pc .dl-b a+a{border-left:1px solid var(--line)}
.ml2-pc .dl-b a:hover{background:var(--ink);color:#fff}
.ml2-pc .dl-b a:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.ml2-mob .dl-b a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;font-family:var(--fd);font-weight:700;font-size:.78rem;letter-spacing:.06em;color:var(--ink-2);cursor:pointer;transition:background-color .25s var(--e),color .25s var(--e)}
.ml2-mob .dl-b a+a{border-left:1px solid var(--line-2)}
.ml2-mob .dl-b a:active{background:var(--night);color:#fff}
.ml2-mob .dl-b a:focus-visible{outline:2px solid var(--c1);outline-offset:-2px}

/* ---------- obrasci kao u demou: bez zvjezdica (obavezna polja i dalje provjerava Balbooa), ime i telefon u istom redu ---------- */
.ml2 .ml2-bf .required-star{display:none!important}
.ml2 .ml2-bf .ba-input-label-wrapper{padding:0!important;margin:0!important}
.ml2 .ml2-bf .ba-form-column.ml2-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:.8rem}
.ml2 .ml2-bf .ba-form-column.ml2-grid>.ba-form-field-item{grid-column:1/-1;min-width:0}
.ml2 .ml2-bf .ba-form-column.ml2-grid>.ml2-half{grid-column:auto}
/* Balbooa (ba-style.css) jačim selektorom postavlja veličinu i debljinu teksta izbora; vraćamo vrijednosti demoa (.chip span) */
.ml2-pc .ml2-bf .ba-form-field-item .ba-checkbox-title{font-size:.92rem!important;font-weight:600!important}
.ml2-mob .ml2-bf .ba-form-field-item .ba-checkbox-title{font-size:.82rem!important;font-weight:600!important}
/* Kontakt: naslov sekcije je h1 (jedini na stranici, zbog SEO-a), a izgled kao h2 sekcije u demou */
.ml2-pc .sh h1{font-size:clamp(1.8rem,3.4vw,2.9rem);font-stretch:110%;letter-spacing:-.025em;text-transform:none;line-height:1;color:inherit}
@media (max-width:1100px){.ml2-pc .sh h1{font-size:1.9rem}}
/* stupci iz Balbooe (npr. Ime | Prezime u obrascu Kontakt) ostaju jedan uz drugi */
.ml2 .ml2-bf .ba-form-column-wrapper{display:flex!important;gap:.8rem;flex-wrap:nowrap}
.ml2 .ml2-bf .ba-form-column-wrapper>.ba-form-column{flex:1 1 0;min-width:0;width:auto!important}
/* HR / EN (JEZIK-EN.md): računalo u gornjoj traci, mobitel u traci s ikonama (samo drugi jezik) */
.ml2 .topbar .ml2-lang{display:inline-flex;gap:.5rem}
.ml2 .topbar .ml2-lang a{color:rgba(255,255,255,.62);font-weight:600;letter-spacing:.08em}
.ml2 .topbar .ml2-lang a:hover{color:#fff}
.ml2 .topbar .ml2-lang a.on{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ml2 .ab-btn.ab-lang{font:700 .78rem/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.06em;color:#fff;text-decoration:none}
/* mobitel, stranica Kontakt: naslov obrasca je h1 (globalno najmanje 2.6rem), pa duga riječ ("KONTAKTIRAJTE") na 375 px širi stranicu; stupac ne smije biti širi od ekrana */
.ml2-mob .oform h1{font-size:min(2.6rem,8.5vw);overflow-wrap:break-word}
@media(max-width:959.98px){.ml2-mob .order{grid-template-columns:minmax(0,1fr)}}
/* mobitel: par s poljem za telefon (Kontakt: Email i Telefon) jedno ispod drugog, inače za upis broja ostaje nekoliko px */
.ml2-mob .ml2-bf .ba-form-column.ml2-grid>.ml2-half.ml2-tel{grid-column:1/-1}