/* =====================================================================
   custom.css — Kozmetički salon Slađa
   Učitava se POSLE bootstrap.min.css, style.css i responsive.css.
   Mobile-first: osnovni stilovi važe od 360px, media upiti idu naviše.
   ===================================================================== */

/* ---- 1. Tokeni palete (ustav 1.1.0; kontrast izmeren u specs/002…/research.md, R2) ----
   Zlatno-crna paleta, varijanta C "Ritam svetlo-tamno". Roze postoji SAMO u logou
   i faviconu. Logo stoji samo na svetloj površini. --zlatna NIKAD nije tekst na svetlom.     */
:root {
  /* osnovni tokeni */
  --krem: #FBF8F2;             /* svetla površina */
  --krem-tamna: #F1EADC;       /* nijansa krem: hero, kontakt, kutije, pozadina slika */
  --tekst: #1A1A1A;            /* tekst na svetlom — 16,42:1 na krem */
  --crna: #111111;             /* tamna površina */
  --crna-2: #1C1C1C;           /* nijansa crne: kartice na tamnom */
  --crna-3: #262626;           /* nijansa crne: hover kartica */
  --tekst-na-tamnom: #F3EBDD;  /* tekst na tamnom — 15,95:1 na crnoj */
  --zlatna: #C9A24D;           /* akcenat; tekst samo na tamnom — 7,88:1 na crnoj */
  --zlatna-tamna: #7A5C14;     /* "zlatni" tekst na svetlom — 5,88:1 na krem */
  --linija-svetla: #E6DCC8;    /* dekorativne linije na svetlom */
  --linija-tamna: rgba(201, 162, 77, .35); /* dekorativne linije na tamnom */
  --touch: 44px;               /* najmanja dodirna meta */

  /* semantički tokeni — svetla površina (tamna ih predefiniše u .povrsina--tamna) */
  --povrsina: var(--krem);
  --povrsina-2: var(--krem-tamna);
  --povrsina-3: var(--krem-tamna);
  --boja-teksta: var(--tekst);
  --boja-naslova: var(--tekst);
  --boja-akcenta: var(--zlatna-tamna);
  --boja-ukrasa: var(--zlatna);
  --boja-linka: var(--tekst);
  --fokus: var(--tekst);
  --linija: var(--linija-svetla);
  --dugme-bg: var(--crna);
  --dugme-tekst: var(--tekst-na-tamnom);
  --dugme-hover-bg: var(--zlatna);
  --dugme-hover-tekst: var(--crna);
}

/* tamna površina: usluge, O salonu, footer */
.povrsina--tamna {
  --povrsina: var(--crna);
  --povrsina-2: var(--crna-2);
  --povrsina-3: var(--crna-3);
  --boja-teksta: var(--tekst-na-tamnom);
  --boja-naslova: var(--zlatna);
  --boja-akcenta: var(--zlatna);
  --boja-linka: var(--zlatna);
  --fokus: var(--zlatna);
  --linija: var(--linija-tamna);
  --dugme-bg: var(--zlatna);
  --dugme-tekst: var(--crna);
  --dugme-hover-bg: var(--tekst-na-tamnom);
  --dugme-hover-tekst: var(--crna);
  background: var(--povrsina);
  color: var(--boja-teksta);
}

/* ---- 2. Osnova ------------------------------------------------------ */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--povrsina);
  color: var(--boja-teksta);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--boja-naslova);
  font-weight: 700;
  overflow-wrap: anywhere;
}
h1 { font-size: 2rem; line-height: 1.15; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }

p { color: var(--boja-teksta); font-size: 1rem; line-height: 1.7; }
a { color: var(--boja-linka); }
a:hover { color: var(--boja-akcenta); }

:focus-visible { outline: 3px solid var(--fokus) !important; outline-offset: 2px; }

.titlepage { padding-bottom: 28px; }
.titlepage h2 {
  color: var(--boja-naslova);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
}
/* zlatna ukrasna linija ispod naslova — ukras, kontrast nosi tekst naslova */
.titlepage h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 10px auto 0;         /* naslovi sekcija su centrirani (template) */
  background: var(--boja-ukrasa);
}

section { padding: 48px 0; }

/* ---- 3. Dugmad ------------------------------------------------------ */
.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 10px 24px;
  border: 2px solid var(--dugme-bg);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  text-decoration: none !important;
}
.sl-btn--primary { background: var(--dugme-bg); color: var(--dugme-tekst); }
.sl-btn--primary:hover, .sl-btn--primary:focus { background: var(--dugme-hover-bg); border-color: var(--dugme-hover-bg); color: var(--dugme-hover-tekst); }
.sl-btn--ghost { background: transparent; border-color: var(--boja-naslova); color: var(--boja-naslova); }
.sl-btn--ghost:hover, .sl-btn--ghost:focus { background: var(--povrsina-2); color: var(--boja-naslova); }

/* ---- 4. Header i meni ----------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--krem);
  border-bottom: 1px solid var(--zlatna);
}
.site-header .navbar { padding: 8px 0; flex-wrap: wrap; }
.site-header .navbar-brand { padding: 0; margin-right: auto; display: flex; align-items: center; min-height: var(--touch); }
.site-header .navbar-brand img { height: 48px; width: auto; display: block; }
.site-header .sl-btn { padding: 8px 18px; margin: 0 8px; }
.site-header .navbar-toggler {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0;
  border: 2px solid var(--tekst);
  border-radius: 8px;
  color: var(--tekst);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* data: SVG ne čita CSS varijable — boja poteza je --tekst (#1A1A1A) upisana doslovno */
.site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%231A1A1A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.site-header .navbar-collapse { flex-basis: 100%; }
.site-header .nav-link {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 8px 4px;
  color: var(--tekst);
  font-weight: 500;
  border-bottom: 1px solid var(--linija-svetla);
}
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--zlatna-tamna); background: transparent; }

@media (min-width: 768px) {
  .site-header .navbar-toggler { display: none; }
  .site-header .navbar { flex-wrap: nowrap; }
  .site-header .navbar-collapse { flex-basis: auto; flex-grow: 0; order: 2; }
  .site-header .navbar-brand { order: 1; }
  .site-header .sl-btn { order: 3; margin: 0 0 0 12px; }
  .site-header .nav-link { border-bottom: 0; padding: 8px 14px; }
  .site-header .navbar-nav { flex-direction: row; }
}

/* ---- 5. Hero -------------------------------------------------------- */
/* hover ghost dugmeta mora se razlikovati od pozadine hero sekcije */
.hero { --povrsina-2: var(--krem); background: var(--krem-tamna); padding: 28px 0 36px; text-align: center; }
.hero__logo { width: 220px; max-width: 70%; height: auto; margin: 0 auto 12px; display: block; }
.hero h1 { color: var(--tekst); margin-bottom: 4px; }
.hero__grad { font-size: 1.125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--zlatna-tamna); margin-bottom: 20px; }
.hero__grad::after { content: ""; display: block; width: 48px; height: 2px; margin: 10px auto 0; background: var(--zlatna); }
.hero__akcije { display: flex; flex-direction: column; gap: 12px; align-items: stretch; max-width: 320px; margin: 0 auto; }
@media (min-width: 768px) {
  .hero { padding: 56px 0; text-align: left; }
  .hero .row { align-items: center; }
  .hero__logo { width: 100%; max-width: 380px; margin: 0 auto; }
  .hero__grad::after { margin-left: 0; }
  .hero__akcije { flex-direction: row; max-width: none; justify-content: flex-start; }
  .hero h1 { font-size: 2.75rem; }
}

/* ---- 6. Usluge (kartice kategorija; tamna površina) ----------------- */
.usluge-kartice { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.usluge-kartica {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 84px;
  padding: 16px 18px;
  background: var(--povrsina-2);
  border: 1px solid var(--linija);
  border-left: 5px solid var(--zlatna);
  border-radius: 10px;
  text-decoration: none !important;
  height: 100%;
}
.usluge-kartica:hover, .usluge-kartica:focus { background: var(--povrsina-3); }
.usluge-kartica__naziv { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.15rem; color: var(--boja-naslova); }
.usluge-kartica__broj { font-size: .9rem; color: var(--boja-teksta); }
.usluge-kartica:hover .usluge-kartica__naziv, .usluge-kartica:focus .usluge-kartica__naziv { color: var(--boja-naslova); }
@media (min-width: 576px) { .usluge-kartice { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .usluge-kartice { grid-template-columns: repeat(4, 1fr); } }

/* ---- 6b. Cenovnik ---------------------------------------------------- */
.pretraga { max-width: 640px; margin: 0 auto 20px; }
.pretraga label { display: block; font-weight: 600; color: var(--tekst); margin-bottom: 6px; }
.pretraga__polje { display: flex; flex-direction: column; gap: 8px; }
.pretraga input[type="search"] {
  width: 100%;
  min-height: var(--touch);
  padding: 8px 16px;
  font: inherit;
  color: var(--tekst);
  background: #fff;
  border: 2px solid var(--zlatna-tamna);
  border-radius: 10px;
}
.pretraga input[type="search"]:focus { border-color: var(--tekst); }
.pretraga__status { min-height: 1.6em; margin-top: 6px; font-size: .9rem; color: var(--zlatna-tamna); }
.pretraga [hidden], .cenovnik-rezultati[hidden], #cenovnik-lista[hidden] { display: none !important; }
@media (min-width: 576px) { .pretraga__polje { flex-direction: row; } .pretraga__polje .sl-btn { white-space: nowrap; } }

#cenovnik-lista, .cenovnik-rezultati, .cenovnik-napomena { max-width: 760px; margin-left: auto; margin-right: auto; }

details.kategorija { margin-bottom: 10px; border: 1px solid var(--linija-svetla); border-radius: 10px; overflow: hidden; background: #fff; }
details.kategorija > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
  padding: 12px 16px;
  background: var(--tekst);
  color: var(--tekst-na-tamnom);
  cursor: pointer;
  list-style: none;
}
details.kategorija > summary:focus-visible { outline-color: var(--zlatna) !important; }
details.kategorija > summary::-webkit-details-marker { display: none; }
details.kategorija > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  margin-left: 4px;
  border-right: 2px solid var(--zlatna);
  border-bottom: 2px solid var(--zlatna);
  transform: rotate(45deg);
  transition: transform .2s;
}
details.kategorija[open] > summary::after { transform: rotate(-135deg); }
.kategorija__naziv { flex: 1 1 auto; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.1rem; color: var(--zlatna); }
.kategorija__broj { font-size: .85rem; color: var(--tekst-na-tamnom); white-space: nowrap; }
.kategorija__opis { padding: 12px 16px 0; font-size: .95rem; }

.usluge-red, .cenovnik-rezultati { list-style: none; margin: 0; padding: 0; }
.usluge-red li, .cenovnik-rezultati li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--linija-svetla);
}
.usluge-red li:first-child { border-top: 0; }
.cenovnik-rezultati { border: 1px solid var(--linija-svetla); border-radius: 10px; overflow: hidden; background: #fff; }
.cenovnik-rezultati li:first-child { border-top: 0; }
.usluga { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cena { flex: 0 0 auto; font-weight: 600; color: var(--zlatna-tamna); white-space: nowrap; }
.rezultat__kategorija { display: block; font-size: .8rem; color: var(--zlatna-tamna); }

.cenovnik-objasnjenje { margin: 22px 0 14px; padding: 14px 16px; background: var(--krem-tamna); border-left: 5px solid var(--zlatna); border-radius: 0 10px 10px 0; }
.cenovnik-objasnjenje h3 { font-size: 1.1rem; padding-bottom: 6px; }
.cenovnik-napomena { margin-top: 16px; font-size: .9rem; text-align: center; }
.cenovnik-greska { text-align: center; padding: 24px 0; }

/* ---- 6c. Kontakt ----------------------------------------------------- */
#kontakt { background: var(--krem-tamna); }
.kontakt-lista { list-style: none; margin: 0 0 24px; padding: 0; }
.kontakt-lista li[hidden] { display: none; }
.kontakt-akcija {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--linija-svetla);
  color: var(--tekst);
  text-decoration: none !important;
}
.kontakt-akcija:hover, .kontakt-akcija:focus { background: var(--krem); color: var(--tekst); }
.kontakt-akcija__ikona {
  flex: 0 0 var(--touch);
  width: var(--touch); height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--crna);
  color: var(--zlatna);
  font-size: 1.35rem;
}
.ikona-svg { width: 24px; height: 24px; }
.kontakt-akcija__tekst { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.kontakt-akcija__tekst strong { color: var(--zlatna-tamna); font-size: .85rem; font-weight: 600; }

.radno-vreme__naslov { font-size: 1.15rem; padding-bottom: 8px; }
.radno-vreme { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0 0 24px; }
.radno-vreme dt { font-weight: 500; }
.radno-vreme dd { margin: 0; text-align: right; font-weight: 600; color: var(--zlatna-tamna); }

.mapa { width: 100%; height: 300px; border: 0; border-radius: 10px; background: var(--krem); }
@media (min-width: 768px) { .mapa { height: 100%; min-height: 420px; } }

/* ---- 6d. Galerija ---------------------------------------------------- */
/* dugmad za skok na grupu (Nokti · Obrve · Usne) */
.galerija__grupe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 24px; }
.galerija__grupe a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); min-width: 88px; padding: 6px 20px;
  border: 1px solid var(--zlatna); border-radius: 999px;
  background: #fff; color: var(--tekst); font-weight: 500;
  text-decoration: none !important;
}
.galerija__grupe a:hover, .galerija__grupe a:focus { background: var(--crna); border-color: var(--crna); color: var(--tekst-na-tamnom); }
.galerija__podnaslov { font-size: 1.25rem; margin: 8px 0 14px; }
.galerija__podnaslov:not(:first-of-type) { margin-top: 32px; }
.galerija__mreza { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.galerija__mreza > div { min-width: 0; }
.galerija__slika { display: block; border-radius: 10px; overflow: hidden; background: var(--krem-tamna); }
.galerija__slika img, .galerija__video video {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--krem-tamna);
}
/* normalize.css templatea postavlja dialog na display:block — zatvoren prozor mora biti skriven */
dialog:not([open]) { display: none; }
.galerija__slika:hover img, .galerija__slika:focus img { opacity: .9; }

.galerija__parovi { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pre-posle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.pre-posle__slika { position: relative; }
.pre-posle figcaption {
  position: absolute; left: 8px; bottom: 8px;
  padding: 2px 12px; border-radius: 999px;
  background: var(--crna); color: var(--tekst-na-tamnom);
  font-size: .85rem; font-weight: 600; pointer-events: none;
}
.galerija__vise { text-align: center; margin-top: 28px; }

.galerija__prikaz { padding: 0; border: 0; background: transparent; max-width: 95vw; max-height: 95vh; overflow: visible; }
.galerija__prikaz::backdrop { background: rgba(17, 17, 17, .9); }
.galerija__prikaz img { display: block; max-width: 95vw; max-height: 85vh; width: auto; height: auto; margin: 0 auto; border-radius: 8px; }
.galerija__zatvori {
  display: block; margin: 0 auto 10px; min-height: var(--touch); min-width: 120px; padding: 8px 24px;
  border: 2px solid var(--zlatna); border-radius: 999px; background: var(--crna); color: var(--tekst-na-tamnom); font-weight: 600;
}
.galerija__zatvori:focus-visible { outline-color: var(--zlatna) !important; }

@media (min-width: 768px) {
  .galerija__mreza { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .galerija__parovi { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  /* neparan broj parova: poslednji par na sredini, ne uz levu ivicu */
  .galerija__parovi .pre-posle:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}
/* 10 stavki noktiju (video + 9 slika) = dva reda po pet */
@media (min-width: 992px) { .galerija__mreza { grid-template-columns: repeat(5, 1fr); } }

/* ---- 7. O salonu (tamna površina) ----------------------------------- */
.o-salonu .tekst { max-width: 68ch; margin: 0 auto; }
.o-salonu p + p { margin-top: 14px; }
.o-salonu__usluge { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 6px 28px; grid-template-columns: 1fr; }
.o-salonu__usluge li { position: relative; padding-left: 20px; line-height: 1.5; color: var(--boja-teksta); }
.o-salonu__usluge li::before {
  content: "";
  position: absolute; left: 2px; top: .6em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--boja-ukrasa);  /* zlatna tačka — ukras */
}
.o-salonu__usluge li:first-child { grid-column: 1 / -1; }  /* trajna šminka je duga stavka */
@media (min-width: 576px) { .o-salonu__usluge { grid-template-columns: 1fr 1fr; } }

/* ---- 8. Footer (tamna površina) ------------------------------------- */
footer .footer { background: var(--povrsina); padding: 36px 0 0; text-align: center; }
footer .footer p, footer .footer a { color: var(--tekst-na-tamnom); }
footer .footer a { text-decoration: underline !important; display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 6px; }
footer .footer a:hover { color: var(--zlatna); }
footer .footer .footer__naziv { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 700; color: var(--zlatna); }
.footer__drustvene { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
footer .copyright { margin-top: 20px; padding: 10px 0 14px; background: transparent; border-top: 1px solid var(--linija); }
footer .copyright p { color: var(--tekst-na-tamnom); font-size: .875rem; padding-top: 6px; }

/* ---- 9. Override boja templatea (narandžasta #fa8c17, ljubičasta #7321cd, tamni blokovi) ---- */
ul.social_icon li a:hover,
.read_more:hover,
.main_form .send_btn:hover,
.right_btn { background-color: var(--crna); }
.get_btn:hover,
.pricing_box_ti h3 span,
ul.link_menu li.active a,
ul.link_menu li a:hover,
.right_btn:hover,
.copyright a:hover,
.navigation.navbar-dark .navbar-nav .nav-link:hover,
.navigation.navbar-dark .navbar-nav .show>.nav-link { color: var(--zlatna-tamna); }
.get_btn, .read_more, .main_form .send_btn, .back_re,
ul.social_icon li a { background-color: var(--crna); }
.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover,
.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show { background-color: transparent; }

/* ---- 10. Uklonjeni elementi templatea (za svaki slučaj) ------------- */
.loader_bg { display: none !important; }