/* ============================================================
   Kontakt i zakazivanje — page-kontakt.css
   Reuse tokena iz app.css; sve nove klase prefiksovane .kontakt-/.ks-/.kf-
   Signature: prijateljska forma sa "uzrast bebe" selectom + kapljice u herou
   ============================================================ */

/* ---- HERO ---- */
.kontakt-hero{padding-bottom:clamp(48px,7vw,84px);text-align:center}
.kontakt-hero-inner{position:relative;z-index:1;max-width:760px}
.kontakt-hero h1{font-size:clamp(2.3rem,5.6vw,4rem);margin-bottom:1.25rem}
.kontakt-hero h1 em{font-style:italic;color:var(--aqua);position:relative;white-space:nowrap}
.kontakt-hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;
  background:color-mix(in srgb,var(--aqua) 45%,transparent);border-radius:2px}
.kontakt-hero .lead{margin-inline:auto;margin-bottom:1.9rem}

/* signature kapljice/mehurići koji nežno lebde u herou */
.kontakt-drops{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kontakt-drops span{position:absolute;bottom:-40px;width:var(--s,18px);height:var(--s,18px);border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9),color-mix(in srgb,var(--aqua-bright) 55%,transparent) 60%,transparent);
  opacity:0;animation:kontaktRise linear infinite}
.kontakt-drops span:nth-child(1){left:12%;--s:16px;animation-duration:13s;animation-delay:0s}
.kontakt-drops span:nth-child(2){left:28%;--s:11px;animation-duration:16s;animation-delay:2.4s}
.kontakt-drops span:nth-child(3){left:47%;--s:22px;animation-duration:15s;animation-delay:5s}
.kontakt-drops span:nth-child(4){left:63%;--s:13px;animation-duration:14s;animation-delay:1.2s}
.kontakt-drops span:nth-child(5){left:78%;--s:18px;animation-duration:17s;animation-delay:6.5s}
.kontakt-drops span:nth-child(6){left:90%;--s:10px;animation-duration:12s;animation-delay:3.6s}
@keyframes kontaktRise{
  0%{transform:translateY(0) scale(.7);opacity:0}
  12%{opacity:.7}
  85%{opacity:.5}
  100%{transform:translateY(-72vh) scale(1.05);opacity:0}
}

/* ---- LAYOUT ---- */
.kontakt-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:start}

/* ---- FORMA (signature) ---- */
.kontakt-formwrap{position:relative}
.kontakt-form{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.5vw,2.6rem);box-shadow:var(--shadow);overflow:hidden}
/* nežni "vodeni" gornji akcenat */
.kontakt-form::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--aqua-bright),var(--aqua) 45%,var(--blush));opacity:.9}
.kf-title{font-size:clamp(1.5rem,3vw,2.1rem);margin:.7rem 0 .4rem}
.kf-sub{color:var(--muted);font-size:.98rem;margin-bottom:1.7rem;max-width:46ch}

.kf{display:flex;flex-direction:column;gap:1.15rem}
.kf-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.kf-field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.kf-field label{font-size:.86rem;font-weight:600;color:var(--fg);letter-spacing:.01em}
.kf-req{color:var(--aqua)}
.kf-opt,.kf-field label .kf-opt{font-weight:500;color:var(--muted);font-size:.8rem}

.kf-field input,
.kf-field textarea,
.kf-select select{
  width:100%;font-family:'Manrope',sans-serif;font-size:1rem;color:var(--fg);
  background:color-mix(in srgb,var(--sand) 26%,var(--card));
  border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:.85em 1em;line-height:1.4;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  -webkit-appearance:none;appearance:none}
.kf-field textarea{resize:vertical;min-height:118px}
.kf-field input::placeholder,
.kf-field textarea::placeholder{color:var(--muted);opacity:.75}
.kf-field input:focus-visible,
.kf-field textarea:focus-visible,
.kf-select select:focus-visible{
  outline:none;border-color:var(--aqua);
  background:var(--card);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--aqua) 18%,transparent)}
.kf-field input:invalid:not(:placeholder-shown){border-color:color-mix(in srgb,var(--blush) 70%,var(--aqua))}

/* custom select sa strelicom — deo signature "uzrast bebe" motiva */
.kf-select{position:relative}
.kf-select select{padding-right:2.8em;cursor:pointer}
.kf-select svg{position:absolute;right:1em;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--aqua);pointer-events:none;transition:transform .2s var(--ease)}
.kf-select:focus-within svg{transform:translateY(-50%) rotate(180deg)}
.kf-select select:required:invalid{color:var(--muted)}
.kf-select option{color:var(--ink);background:var(--card)}

/* honeypot — vizuelno i asistivno sakriveno */
.kf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.kf-submit{margin-top:.4rem;justify-content:center;width:100%;font-size:1.02rem;padding:1em 1.4em}
.kf-fine{font-size:.8rem;color:var(--muted);text-align:center;margin-top:.2rem;line-height:1.5}

/* ---- NOTICE ---- */
.kf-notice{display:flex;gap:.85rem;align-items:flex-start;border-radius:var(--r-md);
  padding:1.1rem 1.3rem;margin-bottom:1.5rem;font-size:.95rem;line-height:1.55;border:1px solid var(--line)}
.kf-notice svg{width:24px;height:24px;flex:none;margin-top:.1rem}
.kf-notice strong{color:var(--fg)}
.kf-notice a{color:var(--aqua);border-bottom:1px solid transparent;transition:border-color .2s}
.kf-notice a:hover{border-color:var(--aqua)}
.kf-ok{background:color-mix(in srgb,var(--aqua) 12%,var(--card));border-color:color-mix(in srgb,var(--aqua) 40%,transparent);color:var(--fg)}
.kf-ok svg{color:var(--aqua)}
.kf-err{background:color-mix(in srgb,var(--blush) 22%,var(--card));border-color:color-mix(in srgb,var(--blush) 55%,transparent);color:var(--fg)}
.kf-err svg{color:color-mix(in srgb,var(--blush) 60%,var(--ink))}

/* ---- DESNO: NAP + MAPA ---- */
.kontakt-side{display:flex;flex-direction:column;gap:1.2rem;position:sticky;top:96px}
.kontakt-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-sm)}
.ks-title{font-size:clamp(1.35rem,2.6vw,1.7rem);margin:.6rem 0 .3rem}
.ks-nap{margin-top:1.2rem}
.ks-nap svg{color:var(--aqua)}
.ks-nap a{color:var(--fg);border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.ks-nap a:hover{border-color:var(--aqua);color:var(--aqua)}
.ks-small{color:var(--muted);font-size:.82rem;font-weight:500}
.ks-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.ks-actions .btn{flex:1;justify-content:center;min-width:130px}

.ks-map{aspect-ratio:5/4}
.ks-map .pin{gap:.55rem;padding:1.2rem}

/* ---- LAZY MAPA (facade + embed) ---- */
.ks-mapwrap{display:flex;flex-direction:column;gap:.7rem}
/* dugme koje izgleda kao mapa-kartica; klik ubacuje pravi iframe */
.map-facade{display:block;width:100%;margin:0;padding:0;font:inherit;color:inherit;
  text-align:center;background:linear-gradient(135deg,#24413a,#37594e);cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.map-facade:hover{transform:translateY(-3px)}
.map-facade:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:3px}
.map-facade-cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  color:#0f2a24;background:var(--aqua-bright);
  padding:.5em 1.05em;border-radius:var(--r-pill);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:transform .2s var(--ease)}
.map-facade:hover .map-facade-cta{transform:translateY(-1px)}

.mapembed{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);aspect-ratio:4/3;background:var(--sand)}
.mapembed iframe{display:block;width:100%;height:100%;border:0}

.ks-maplink{align-self:flex-start;font-size:.88rem;font-weight:600;color:var(--aqua);
  border-bottom:1px solid transparent;transition:border-color .2s}
.ks-maplink:hover{border-color:var(--aqua)}

/* ---- KAKO DO NAS I OKOLINA (lokalni/regionalni SEO) ---- */
.kon-lokal-head{max-width:var(--read)}
.kon-lokal-h2{font-size:var(--fs-h2);margin:.8rem 0 .7rem}
.kon-lokal-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.6rem;align-items:start}
.kon-lokal-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow-sm)}
.kon-lokal-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:color-mix(in srgb,var(--aqua) 13%,transparent);color:var(--aqua)}
.kon-lokal-ico svg{width:27px;height:27px}
.kon-lokal-card h3{font-size:var(--fs-h3);margin-bottom:.6rem}
.kon-lokal-card p{color:var(--muted);font-size:.98rem}
.kon-lokal-card strong{color:var(--fg);font-weight:600}

.kon-lokal-list{list-style:none;padding:0;margin:1.2rem 0 1.4rem;display:flex;flex-direction:column;gap:.7rem}
.kon-lokal-list li{display:flex;gap:.65rem;font-size:.94rem;color:var(--muted)}
.kon-lokal-list svg{width:18px;height:18px;color:var(--aqua);flex:none;margin-top:.2rem}

.kon-lokal-chips{list-style:none;padding:0;margin:1.2rem 0;display:flex;flex-wrap:wrap;gap:.55rem}
.kon-lokal-chips li{display:inline-flex;align-items:center;font-size:.88rem;font-weight:600;color:var(--aqua);
  background:color-mix(in srgb,var(--aqua) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--aqua) 22%,transparent);
  border-radius:var(--r-pill);padding:.4em 1em;
  transition:transform .2s var(--ease),background .2s var(--ease)}
.kon-lokal-chips li:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--aqua) 16%,transparent)}
.kon-lokal-note{margin-top:1rem;font-size:.92rem}

.kon-lokal-link{display:inline-block;font-size:.9rem;font-weight:600;color:var(--aqua);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.kon-lokal-link:hover{border-color:var(--aqua);color:var(--aqua-bright)}

/* ---- RESPONSIVE ---- */
@media (max-width:900px){
  .kontakt-grid{grid-template-columns:1fr;gap:1.6rem}
  .kontakt-side{position:static;top:auto}
  .kon-lokal-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .kf-row{grid-template-columns:1fr}
  .ks-actions .btn{flex:1 1 100%}
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion:reduce){
  .kontakt-drops{display:none}
  .kontakt-drops span{animation:none}
  .kf-select:focus-within svg,.map-facade:hover,.map-facade:hover .map-facade-cta{transform:none}
  .kon-lokal-chips li:hover{transform:none}
}