/* Predlog dizajna — Powered by Stefan Spasov, BloodCode System.
   Samo dopune postojećeg izgleda; ništa se ne briše. */

/* ── 1. hero panel sa obrascem (bio beo na 43% providnosti) ─────────────── */
.hero .item.search-form{
  background:rgba(255,255,255,.95) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius:22px !important;
  padding:30px !important;
  box-shadow:0 28px 64px rgba(6,75,79,.26) !important;
  backdrop-filter:saturate(135%) blur(4px);
}
.hero h1{letter-spacing:-.02em !important;line-height:1.1 !important;
  text-shadow:0 2px 20px rgba(0,0,0,.22)}

/* ── 2. polja obrasca ──────────────────────────────────────────────────── */
.mat-mdc-text-field-wrapper{
  background:#fbfcfc !important;
  border:1px solid #e2e7e7 !important;
  border-radius:12px !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.mat-mdc-text-field-wrapper:hover{border-color:#cdd8d8 !important}
.mat-focused .mat-mdc-text-field-wrapper{
  border-color:#CA4A00 !important;
  box-shadow:0 0 0 3px rgba(202,74,0,.13) !important;
}

/* ── 3. dugmad ────────────────────────────────────────────────────────── */
.mdc-button--raised.mat-mdc-raised-button,
.mat-mdc-unelevated-button{
  border-radius:999px !important;
  min-height:48px !important;
  padding:0 28px !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  box-shadow:0 6px 18px rgba(202,74,0,.26) !important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.mdc-button--raised.mat-mdc-raised-button:hover,
.mat-mdc-unelevated-button:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 12px 28px rgba(202,74,0,.32) !important;
  filter:brightness(.97);
}

/* ── 4. kartice ───────────────────────────────────────────────────────── */
.mat-mdc-card.country-card,
.mat-mdc-card.hospital-card,
.search-results .mat-mdc-card{
  border-radius:16px !important;
  box-shadow:0 4px 16px rgba(6,75,79,.07) !important;
  border:1px solid #edf1f1 !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.mat-mdc-card.country-card:hover,
.mat-mdc-card.hospital-card:hover,
.search-results .mat-mdc-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 16px 36px rgba(6,75,79,.14) !important;
}

/* Kartice zemalja: bile su niske kutije sa sitnom zastavom i mnogo praznine.
   Ravnomerna mreža, veća zastava, jednaka visina. */
/* 6 zemalja je pri 186 px ulazilo u 5 kolona, pa je šesta padala sama u novi
   red. Pri 168 px staje svih 6 u jedan red (6×168 + 5×16 = 1088 < 1170). */
.countries-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr)) !important;
  gap:16px !important;
}
.countries-grid .mat-mdc-card.country-card{
  padding:22px 14px !important;
  min-height:126px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}
.flag-img{
  width:62px !important;height:auto !important;
  border-radius:5px !important;margin:0 !important;
  box-shadow:0 1px 4px rgba(0,0,0,.14) !important;
}

/* ── 5. zaglavlje ─────────────────────────────────────────────────────── */
app-menu .section{box-shadow:0 2px 14px rgba(6,75,79,.16) !important}

/* ── 6. sitan pravni tekst ───────────────────────────────────────────── */
p.disclaimer{font-size:12.5px !important;line-height:1.6 !important;
  color:#5f6b6b !important}

/* ── 7. ritam sekcija ────────────────────────────────────────────────────
   Blokovi `app-home .element` imali su FIKSNU visinu 800px bez obzira na
   sadržaj, pa su između sekcija ostajale praznine od po nekoliko stotina
   piksela. Visina se pušta da se prilagodi sadržaju, uz uredan unutrašnji
   prostor. Ukrasni oblici (kružnice) se NE diraju — njih prepoznajemo po
   velikom radijusu. */
/* Praznine dolaze od komponenti sa FIKSNOM visinom (mereno u pregledaču):
   `hero` 800 px, `how-it-works` 752 px, `nearby-locations` 800 px — bez obzira
   koliko sadržaja imaju. Hero ostaje visok (to je glavna slika), a ostalima se
   visina pušta ili smanjuje. */
/* MERENO, ne pretpostavljeno: `how-it-works` (752 px) i `top-locations`
   (685 px) su gotovo puni sadržajem — kad sam im dodao unutrašnju marginu,
   POVEĆALI su se na 826 i 884 px. Zato se ne diraju.
   Jedino `nearby-locations` je stvarno imao 800 px za karusel koji staje u 600. */
nearby-locations, nearby-locations > .nearby-locations{
  height:600px !important; min-height:0 !important;
}
nearby-locations img{height:600px !important;object-fit:cover !important}
app-home h2{letter-spacing:-.01em !important;line-height:1.18 !important}

/* Ikone „How it Works" bile su 302 px visoke sa 40 px praznine ispod. */
.icon-item{margin-bottom:14px !important}
.icon-item img,.icon-item svg{max-width:108px !important;height:auto !important}
.item.icons{margin-top:26px !important}

/* ── 7b. tipografija i sitni potezi ─────────────────────────────────── */
app-home h2, app-seo-render h2{font-weight:700 !important}
app-home .element img, nearby-locations img, top-locations img{
  border-radius:14px !important;
}
/* Narandžasta traka sa porukom bila je zbijena od ivice do ivice. */
app-home .elements h2{font-size:26px !important;line-height:1.25 !important;
  margin:0 0 8px 0 !important}
app-home .elements p{max-width:900px !important;line-height:1.62 !important}

/* Karusel strelice — bile su gotovo nevidljive preko fotografije. */
.swiper-button-next, .swiper-button-prev{
  background:rgba(255,255,255,.92) !important;border-radius:50% !important;
  width:44px !important;height:44px !important;
  box-shadow:0 4px 14px rgba(0,0,0,.18) !important;
}
.swiper-button-next:after, .swiper-button-prev:after{
  font-size:16px !important;color:#0d5f63 !important;font-weight:700 !important;
}

/* ── 7c. sitni potezi koji se osete ──────────────────────────────────── */
html{scroll-behavior:smooth}
::selection{background:rgba(202,74,0,.18)}
img{background:#f4f6f6}                       /* da se ne "trese" dok se učitava */
a{transition:color .14s ease}

/* ── 8. pristupačnost: vidljiv fokus za tastaturu ─────────────────────── */
a:focus-visible,button:focus-visible,.mat-mdc-button-base:focus-visible{
  outline:2px solid #CA4A00 !important;outline-offset:2px !important;
}

/* ── 9. mobilni ─────────────────────────────────────────────────────── */
@media (max-width:640px){
  .hero .item.search-form{padding:20px !important;border-radius:18px !important}
  .countries-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important}
  app-home > .home > .element:not([style*="border-radius"]){padding:38px 0 !important}
  .mdc-button--raised.mat-mdc-raised-button{width:100% !important}
}

/* ── 10. POPRAVKA: font ikona ────────────────────────────────────────────
   MERENO u Chrome-u na /hospitals/{id}/: u traci ispod imena klinike umesto
   ikona pisalo je `info`, `format_list_bulleted`, `medical_services`, `quiz`,
   `reviews` — sirovi nazivi ikona, preko naziva tabova.

   Uzrok: `@font-face` za „Material Icons" postoji SAMO u ugrađenom (critical)
   CSS-u početne strane, ne i u `styles.<hash>.css`. Dok je server na svaku
   adresu vraćao početnu, font se dobijao „uzgred". Otkako svaka ruta ima svoj
   HTML, stranice bez tog ugrađenog CSS-a ostale su bez fonta.

   Popravlja se ovde, a ne u generatoru stranica, jer ovaj CSS ide u SVAKU našu
   stranicu — pa i u one preuzete iz njihovog builda (`/search/`, `/about/`…) —
   i ostaje u <head> i pošto se Angular pokrene i prepiše telo dokumenta.
   `font-src` u CSP-u već dozvoljava fonts.gstatic.com, ništa se ne otvara. */
@font-face{
  font-family:'Material Icons';
  font-style:normal;font-weight:400;font-display:block;
  src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.material-icons,mat-icon.mat-ligature-font{
  font-family:'Material Icons';font-weight:normal;font-style:normal;
  font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
}