/* ==========================================================================
   Tema SpaSarajevo – glavni stilovi
   Paleta i fontovi: nacrt branding booka v0.1 (redizajn/BRANDING-BOOK-nacrt.md)
   ========================================================================== */

/* Fontovi sa našeg servera (latin + latin-ext za č, ć, đ, š, ž) */
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin.woff2") format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-ext.woff2") format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Marcellus";src:url("../fonts/marcellus-latin.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Marcellus";src:url("../fonts/marcellus-latin-ext.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Zajednička osnova */
  --ponoc:#1C1916; --krem:#FAF7F2; --pijesak:#F1EBE1; --linija:#E2D9CC; --taupe:#6F665D; --bijela:#FFFFFF;
  /* Amman Spa */
  --espresso:#4A3426; --orah:#8B6A50;
  /* Sultan Spa */
  --zlato:#B8955A; --zlato-tekst:#7A5E30; --zlato-svijetlo:#EDE6DA;
  /* Tipografija: akcentni font za velike naslove (Marcellus; Cormorant odbačen jer loše crta č, š, ž) */
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --akcent:"Marcellus",Georgia,serif;
  /* Razmaci (mreža od 8 px) */
  --r1:8px; --r2:16px; --r3:24px; --r4:32px; --r6:48px; --r8:64px; --r12:96px;
  --sirina:1200px; --zaglavlje:76px;
  /* Hover i tekst na tamnoj podlozi (izvedeno iz palete; audit P25) */
  --espresso-hover:#3A281D; --zlato-hover:#C9A86E; --tekst-na-tamnom:#D7CFC4; --tekst-na-tamnom-2:#BDB3A6; --tekst-na-tamnom-3:#A99F92;
}

/* --- Osnova -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--zaglavlje)}
body{margin:0;background:var(--krem);color:var(--ponoc);font:400 16px/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.15}
.broj{font-family:var(--sans);font-size:.9em;letter-spacing:.02em}
p{margin:0}
.omot{width:100%;max-width:var(--sirina);margin:0 auto;padding:0 var(--r2)}
.vidljivo-citacu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.preskoci{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ponoc);color:#fff;padding:var(--r1) var(--r2)}
.preskoci:focus{left:var(--r2);top:var(--r2)}
:focus-visible{outline:2px solid var(--zlato);outline-offset:3px}

/* --- Logotipi (ista PNG slika, boja kroz CSS masku) ----------------------- */
.logo{display:block;background:currentColor;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
/* Izvorni SVG logotipi (Drive BREND, 19.10.2026); pripremljeni skriptom skripte/logotipi-svg.ps1 */
.logo--amman-horiz{--logo:url("../img/amman-horiz.svg?v=20261021");aspect-ratio:914.9/250}
.logo--sultan-horiz{--logo:url("../img/sultan-horiz.svg?v=20261021");aspect-ratio:931.43/250}
.logo--amman-vert{--logo:url("../img/amman-vert.svg?v=20261021");aspect-ratio:1014.76/896.09}
.logo--sultan-vert{--logo:url("../img/sultan-vert.svg?v=20261021");aspect-ratio:980/898.74}
.logo--amman-znak{--logo:url("../img/amman-znak.svg?v=20261021");aspect-ratio:137.99/250}
.logo--sultan-znak{--logo:url("../img/sultan-znak.svg?v=20261021");aspect-ratio:167.99/249.99}

/* --- Dugmad ---------------------------------------------------------------- */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:var(--r1);min-height:48px;padding:0 var(--r3);border:1px solid transparent;border-radius:3px;font:600 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.dugme--malo{min-height:40px;padding:0 var(--r2);font-size:12px}
.dugme--espresso{background:var(--espresso);color:#fff}
.dugme--espresso:hover{background:var(--espresso-hover)}
.dugme--zlato{background:var(--zlato);color:var(--ponoc)}
.dugme--zlato:hover{background:var(--zlato-hover)}
.dugme--bijelo-okvir{border-color:rgba(255,255,255,.8);color:#fff;background:transparent}
.dugme--bijelo-okvir:hover{background:rgba(255,255,255,.12)}

/* --- Zaglavlje ------------------------------------------------------------- */
/* Bez backdrop-filtera: on bi postao okvir za fiksni meni na mobitelu */
.zaglavlje{position:sticky;top:0;z-index:50;background:var(--krem);border-bottom:1px solid var(--linija)}
.admin-bar .zaglavlje{top:32px}
.zaglavlje__red{display:flex;align-items:center;gap:var(--r3);min-height:var(--zaglavlje)}
.zaglavlje__logotipi{display:flex;align-items:center;gap:var(--r2);color:var(--ponoc);text-decoration:none;flex:0 0 auto}
.zaglavlje__logotipi .logo{height:30px}
.zaglavlje__crta{width:1px;height:34px;background:var(--linija)}
.zaglavlje__tekst{font:400 18px/1 var(--akcent);letter-spacing:.14em;text-transform:uppercase}
.zaglavlje__nav{margin-left:auto}
.meni{display:flex;gap:var(--r3);list-style:none;margin:0;padding:0}
.meni a{display:block;padding:var(--r1) 0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.meni a:hover,.meni .current-menu-item>a{color:var(--orah)}
.meni .sub-menu{display:none}
/* Padajući podmeni u zaglavlju (računar): otvara se mišem ili tastaturom */
.zaglavlje .meni>li{position:relative;display:flex;align-items:center;height:var(--zaglavlje)}
.zaglavlje .meni>li.menu-item-has-children>a::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 3px 8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .2s}
.zaglavlje .meni>li.menu-item-has-children:hover>a::after,.zaglavlje .meni>li.menu-item-has-children:focus-within>a::after{transform:rotate(225deg) translate(-2px,-2px)}
.zaglavlje .meni .sub-menu{display:block;position:absolute;top:100%;left:-20px;z-index:5;min-width:250px;margin:0;padding:var(--r1) 0;list-style:none;background:var(--krem);border:1px solid var(--linija);border-top:2px solid var(--zlato);box-shadow:0 14px 30px rgba(28,25,22,.12);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s,transform .25s,visibility 0s linear .25s}
.zaglavlje .meni li:hover>.sub-menu,.zaglavlje .meni li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s,visibility 0s}
/* Treći nivo (npr. Cjenovnik → Tretmani ljepote → Pedikura): otvara se sa strane */
.zaglavlje .meni .sub-menu li{position:relative}
.zaglavlje .meni .sub-menu .sub-menu{top:-9px;left:100%}
.zaglavlje .meni .sub-menu a{padding:10px var(--r3);font-size:12px;font-weight:500;letter-spacing:.08em;white-space:nowrap}
.zaglavlje .meni .sub-menu a:hover{background:var(--pijesak);color:var(--ponoc)}
.meni__prebaci{display:none}
.zaglavlje__akcije{display:flex;align-items:center;gap:var(--r2)}
/* Prekidač jezika (modul Jezici): na svim širinama jedno dugme-pilula sa globusom i jezikom na koji se prelazi
   (mobitel 02.11.2026: mali susjedni linkovi "BS | EN" se nisu mogli pogoditi; isto rješenje prošireno na računar
   i tablet istog dana, Senad: ljepše i jedinstveno). Trenutni jezik i razdjelnik ostaju u HTML-u, ali se ne prikazuju. */
.jezici{display:flex;align-items:center;font:600 13px/1 var(--f-tekst);letter-spacing:.12em;text-transform:uppercase;color:inherit}
.jezici__trenutni,.jezici__razd{display:none}
.jezici__veza{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 10px;border:1px solid rgba(255,255,255,.6);border-radius:18px;color:inherit;text-decoration:none;transition:background-color .2s,border-color .2s}
/* Zona za dodir preko 44 px */
.jezici__veza::after{content:"";position:absolute;inset:-6px -4px}
.jezici__veza:hover,.jezici__veza:focus-visible,.jezici__veza:active{background:rgba(255,255,255,.12);border-color:#fff}
.zaglavlje__akcije .jezici{color:var(--ponoc)}
.zaglavlje__akcije .jezici__veza{border-color:rgba(28,25,22,.35)}
.zaglavlje__akcije .jezici__veza:hover,.zaglavlje__akcije .jezici__veza:focus-visible,.zaglavlje__akcije .jezici__veza:active{background:rgba(28,25,22,.06);border-color:rgba(28,25,22,.6)}
.jezici--traka{margin-left:auto;margin-right:16px;color:#fff}
@media (max-width:600px){.jezici--traka{margin-right:10px}}
.jezici__veza::before{content:"";width:16px;height:16px;flex:0 0 auto;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='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%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='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center/contain no-repeat}
.zaglavlje__korpa{position:relative;display:flex;width:28px;height:28px;color:var(--ponoc)}
.zaglavlje__korpa svg{width:100%;height:100%;fill:currentColor}
.zaglavlje__broj{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--espresso);color:#fff;font-size:10px;font-weight:700;line-height:18px;text-align:center}
.zaglavlje__panel-logo{display:none}
.zaglavlje__meni-dugme{display:none;width:44px;height:44px;padding:11px 9px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:space-between}
.zaglavlje__meni-dugme span{display:block;height:2px;background:var(--ponoc);border-radius:1px;transition:transform .2s,opacity .2s}
.zaglavlje__meni-dugme[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.zaglavlje__meni-dugme[aria-expanded="true"] span:nth-child(2){opacity:0}
.zaglavlje__meni-dugme[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* --- Hero ------------------------------------------------------------------ */
.hero{position:relative;display:flex;align-items:flex-end;min-height:min(86vh,760px);background:var(--ponoc);color:#fff;overflow:hidden}
.hero__slika{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,25,22,.15) 0%,rgba(28,25,22,.1) 35%,rgba(28,25,22,.82) 100%)}
.hero__sadrzaj{position:relative;z-index:1;padding-top:var(--r12);padding-bottom:var(--r8)}
.nadnaslov{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.hero__naslov{max-width:14em;margin:var(--r1) 0 var(--r2);font:400 clamp(36px,5.5vw,64px)/1.06 var(--akcent)}
.hero__tekst{max-width:34em;margin-bottom:var(--r3);font-size:17px;opacity:.92}
.hero__dugmad{display:flex;flex-wrap:wrap;gap:var(--r2)}

/* --- Ornament (romb između dvije linije) ----------------------------------- */
.ornament{display:flex;align-items:center;gap:10px;width:180px;margin:0 auto var(--r3)}
.ornament::before,.ornament::after{content:"";flex:1;height:1px;background:currentColor;opacity:.6}
.ornament i{display:block;width:8px;height:8px;border:1px solid currentColor;transform:rotate(45deg)}

/* --- Dva salona ------------------------------------------------------------ */
.saloni{padding-top:var(--r12)}
.saloni__naslov{margin-bottom:var(--r6);padding:0 var(--r2);text-align:center;font:400 clamp(30px,4vw,44px)/1.15 var(--akcent)}
.saloni__red{display:grid;grid-template-columns:1fr 1fr}
.salon{display:flex;flex-direction:column}
.salon__slika{aspect-ratio:3/2;overflow:hidden}
.salon__slika img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.salon:hover .salon__slika img{transform:scale(1.03)}
.salon__tijelo{flex:1;display:flex;flex-direction:column;align-items:center;padding:var(--r6) var(--r4) var(--r8);text-align:center}
.salon__logo{width:150px;margin-bottom:var(--r3)}
.salon__naslov{margin-bottom:var(--r1);font:400 30px/1.2 var(--akcent)}
.salon__adresa{margin-bottom:var(--r3);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.salon__tekst{max-width:30em;margin-bottom:var(--r4);font-size:15px}
.salon__dugmad{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--r2);margin-top:auto}
/* Amman Spa: svijetlo, smeđa */
.salon--amman .salon__tijelo{background:var(--krem);color:var(--ponoc)}
.salon--amman .salon__logo{color:var(--espresso)}
.salon--amman .ornament,.salon--amman .salon__adresa{color:var(--orah)}
.salon--amman .salon__tekst{color:var(--taupe)}
.salon--amman .salon__dugme-glavno{background:var(--espresso);color:#fff}
.salon--amman .salon__dugme-wa{border-color:var(--espresso);color:var(--espresso)}
/* Sultan Spa: tamno, zlatna */
.salon--sultan .salon__tijelo{background:var(--ponoc);color:var(--zlato-svijetlo)}
.salon--sultan .salon__logo,.salon--sultan .ornament,.salon--sultan .salon__adresa{color:var(--zlato)}
.salon--sultan .salon__tekst{color:var(--tekst-na-tamnom-2)}
.salon--sultan .salon__dugme-glavno{background:var(--zlato);color:var(--ponoc)}
.salon--sultan .salon__dugme-wa{border-color:var(--zlato);color:var(--zlato)}

/* --- Podnožje (privremeno) ------------------------------------------------- */
/* Podnožje: tamno (ponoć), logotipi u kremu i zlatu; svjetlije stranice iznad dobijaju jasan završetak */
.podnozje{background:var(--ponoc);border-top:2px solid var(--zlato);padding:var(--r8) 0 var(--r3);font-size:14px;color:rgba(250,247,242,.72)}
.podnozje__red{display:grid;grid-template-columns:minmax(160px,.7fr) 1fr 1fr;gap:var(--r6) var(--r8);align-items:start}
.podnozje__naslov{margin-bottom:var(--r2);font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--zlato)}
.podnozje__meni{margin:0;padding:0;list-style:none}
.podnozje__meni li{margin:0 0 var(--r1)}
.podnozje__meni a{color:var(--krem);text-decoration:none;transition:color .2s}
.podnozje__meni a:hover{color:var(--zlato)}
.podnozje__podaci{display:grid;gap:var(--r1);margin:0;padding:0;list-style:none}
.podnozje__podaci li{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.podnozje__podaci .ikona{flex:0 0 auto;width:16px;height:16px;margin-top:3px;color:var(--zlato)}
.podnozje__mreze{display:flex;gap:var(--r1);margin-top:var(--r3)}
.podnozje__mreze a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(250,247,242,.25);border-radius:50%;color:var(--krem);text-decoration:none;transition:border-color .2s,color .2s}
.podnozje__mreze a:hover{border-color:var(--zlato);color:var(--zlato)}
.podnozje__mreze .ikona{width:18px;height:18px}
@media (max-width:860px){.podnozje__red{grid-template-columns:1fr 1fr}.podnozje__stranice{grid-column:1/-1}}
/* Mobitel (kao donji meni, do 700 px): bez menija sa stranicama (Senad 02.11.2026: višak; navigacija je u donjem meniju) */
@media (max-width:700px){.podnozje__stranice{display:none}}
/* Mobitel: Amman Spa i Sultan Spa u dvije kolone; brojevi i radno vrijeme bez loma, riječ "WhatsApp" samo kao ikona */
@media (max-width:560px){
  .podnozje{padding-top:var(--r6)}
  .podnozje__red{grid-template-columns:1fr 1fr;gap:var(--r4) var(--r2)}
  .podnozje__salon .logo{height:24px;margin-bottom:var(--r2)}
  .podnozje{font-size:13px}
  .podnozje__podaci{gap:var(--r1)}
  .podnozje__podaci li{gap:8px}
  .podnozje__podaci li a,.podnozje__podaci li span{overflow-wrap:anywhere}
  .podnozje__podaci .podnozje__broj,.podnozje__podaci .podnozje__sati{white-space:nowrap;overflow-wrap:normal}
  .podnozje__oznaka{display:none}
  .podnozje__red{align-items:stretch}
  .podnozje__salon{display:flex;flex-direction:column}
  .podnozje__mreze{margin-top:auto;padding-top:var(--r2)}
}
.podnozje__salon .logo{height:36px;margin-bottom:var(--r3)}
.podnozje__salon--amman .logo{color:var(--krem)}
.podnozje__salon--sultan .logo{color:var(--krem)}
.podnozje__salon p{line-height:1.8}
.podnozje__salon a{color:var(--krem);text-decoration-color:rgba(184,149,90,.6);text-underline-offset:3px;transition:color .2s}
.podnozje__salon a:hover{color:var(--zlato)}
.podnozje__dno{margin-top:var(--r6);padding-top:var(--r3);border-top:1px solid rgba(250,247,242,.14);font-size:12px;color:rgba(250,247,242,.55)}
/* Donja traka: © lijevo, kartice (Monri) i pravni linkovi desno. Kartice direktno na tamnoj podlozi (verzije logotipa za tamnu podlogu, 02.11.2026) */
.podnozje__dno{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--r2) var(--r3)}
.podnozje__placanje{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--r2) var(--r3)}
/* Grupe logotipa: unutar grupe 14 px, između grupa 32 px (>= visina Visa Secure znaka, 32 px); grupa prelazi u novi red kao cjelina */
.podnozje__kartice{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px}
.podnozje__grupa{display:flex;align-items:center;gap:14px;margin:0;padding:0;list-style:none}
.podnozje__grupa li{margin:0}
.podnozje__kartice a{display:block}
.podnozje__kartice img{display:block;height:24px;width:auto;max-width:none}
/* Visa SVG nema prazan prostor oko znaka (stari GIF ga je imao), pa niža visina da bude ravnopravna Mastercard znaku */
.podnozje__kartice img[src*="visa-bijela"]{height:15px}
/* Visa Secure značka (96 px izvor, oštra i na retina ekranima) i Monri negativ (tanka bijela slova) veći od ostalih */
.podnozje__kartice img[src*="visa-secure"]{height:32px}
.podnozje__kartice img[src*="monri_footer"]{height:34px}
.podnozje__pravno{display:flex;flex-wrap:wrap;gap:var(--r1) var(--r3);font-size:13px}
.podnozje__pravno a{color:var(--krem);text-decoration:none;transition:color .2s}
.podnozje__pravno a:hover{color:var(--zlato)}
/* Mobitel: sve ne stane u jedan red, pa su ©, logotipi i pravni linkovi centrirani jedno ispod drugog */
@media (max-width:640px){
  .podnozje__dno,.podnozje__placanje{flex-direction:column;justify-content:center;text-align:center}
  .podnozje__kartice,.podnozje__pravno{justify-content:center}
}

/* --- Prozor za rezervaciju (izbor salona) ---------------------------------- */
/* Panel "Rezervišite termin": na računaru sa desne strane, na mobitelu preko cijelog ekrana */
.rezervacija{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;background:var(--krem);color:var(--ponoc);box-shadow:-12px 0 40px rgba(28,25,22,.25);overflow-y:auto}
/* Mirno otvaranje i zatvaranje: blago klizanje i pojava, pozadina se polako zatamnjuje (zatvaranje: klasa .se-zatvara iz glavni.js) */
/* Trajanja (30.10.2026, audit P24): panel se otvara često, pa ulaz 0,42 s i izlaz 0,28 s (ranije 0,7 / 0,45 s) */
.rezervacija[open]{animation:rezervacija-ulaz .42s cubic-bezier(.22,.61,.36,1)}
.rezervacija.se-zatvara{animation:rezervacija-izlaz .28s cubic-bezier(.55,.06,.68,.19) forwards}
@keyframes rezervacija-ulaz{from{transform:translateX(56px);opacity:0}to{transform:none;opacity:1}}
@keyframes rezervacija-izlaz{from{transform:none;opacity:1}to{transform:translateX(56px);opacity:0}}
.rezervacija::backdrop{background:rgba(28,25,22,.55)}
.rezervacija[open]::backdrop{animation:rezervacija-pozadina .3s ease}
.rezervacija.se-zatvara::backdrop{animation:rezervacija-pozadina .28s ease reverse forwards}
@keyframes rezervacija-pozadina{from{opacity:0}to{opacity:1}}
.rezervacija__salon:not([hidden]){animation:rezervacija-salon .5s ease}
@keyframes rezervacija-salon{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rezervacija,.rezervacija::backdrop,.rezervacija__salon{animation:none!important}}
.rezervacija__unutra{display:flex;flex-direction:column;min-height:100%;padding:var(--r3) var(--r4) var(--r4)}
/* Link na cijene salona u panelu (P23) */
.rezervacija__cijene{display:block;margin:var(--r2) 0 0;text-align:center;font:600 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--espresso)}
.rezervacija__cijene span{border-bottom:1px solid currentColor}
.rezervacija__salon--sultan .rezervacija__cijene{color:var(--zlato)}
.rezervacija__vrh{display:flex;align-items:center;justify-content:space-between;gap:var(--r2)}
.rezervacija__naslov{font:400 30px/1.2 var(--akcent);color:var(--ponoc)}
.rezervacija__zatvori{width:44px;height:44px;margin-right:-10px;border:0;background:none;font-size:32px;line-height:1;cursor:pointer;color:var(--taupe);transition:color .3s,transform .4s}
.rezervacija__zatvori:hover{color:var(--ponoc);transform:rotate(90deg)}
/* Bez obruba: fokus pri otvaranju ide na sadržaj panela, ne na dugme (obrub ostaje samo za tastaturu) */
.rezervacija__zatvori:focus:not(:focus-visible),.rezervacija__unutra:focus{outline:none}
.rezervacija__uvod{margin:var(--r1) 0 var(--r3);color:var(--taupe);font-size:14px}
.rezervacija__kartice{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linija);border-radius:3px;overflow:hidden;margin-bottom:var(--r3)}
.rezervacija__kartica{min-height:48px;border:0;background:#fff;color:var(--taupe);font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.rezervacija__kartica--amman[aria-selected="true"]{background:var(--espresso);color:#fff}
.rezervacija__kartica--sultan[aria-selected="true"]{background:var(--ponoc);color:var(--zlato)}
.rezervacija__salon{display:flex;flex-direction:column;gap:var(--r3);padding:var(--r4) var(--r3);border-radius:3px}
.rezervacija__salon[hidden]{display:none}
.rezervacija__salon--amman{background:var(--pijesak)}
.rezervacija__salon--sultan{background:var(--ponoc);color:var(--zlato-svijetlo)}
.rezervacija__logo{height:38px;width:auto;align-self:center}
.rezervacija__salon--amman .rezervacija__logo{color:var(--espresso)}
.rezervacija__salon--sultan .rezervacija__logo{color:var(--zlato)}
.rezervacija__akcije{display:flex;flex-direction:column;gap:10px}
.rezervacija__akcija{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 18px;border-radius:3px;background:#fff;border:1px solid var(--linija);color:var(--ponoc);font:600 14px/1.2 var(--sans);letter-spacing:.04em;text-decoration:none;transition:background-color .2s}
.rezervacija__akcija .ikona{width:22px;height:22px;flex:0 0 22px}
.rezervacija__akcija:hover{background:var(--krem)}
.rezervacija__salon--amman .rezervacija__akcija--glavna{background:var(--espresso);border-color:var(--espresso);color:#fff}
.rezervacija__salon--amman .rezervacija__akcija--glavna:hover{background:var(--espresso-hover)}
.rezervacija__salon--sultan .rezervacija__akcija{background:transparent;border-color:rgba(184,149,90,.5);color:var(--zlato-svijetlo)}
.rezervacija__salon--sultan .rezervacija__akcija:hover{background:rgba(184,149,90,.12)}
.rezervacija__salon--sultan .rezervacija__akcija--glavna{background:var(--zlato);border-color:var(--zlato);color:var(--ponoc)}
.rezervacija__podaci{list-style:none;margin:0;padding:0;font-size:14px}
.rezervacija__podaci li{display:flex;align-items:center;gap:10px;padding:6px 0}
.rezervacija__podaci .ikona{width:18px;height:18px;flex:0 0 18px;color:var(--orah)}
.rezervacija__salon--sultan .rezervacija__podaci .ikona{color:var(--zlato)}
.rezervacija__podaci a{color:inherit}
.rezervacija__mreze{display:flex;gap:12px;justify-content:center}
.rezervacija__mreze a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;color:var(--espresso)}
.rezervacija__salon--sultan .rezervacija__mreze a{color:var(--zlato)}
.rezervacija__mreze .ikona{width:20px;height:20px}

/* --- Ostale stranice (privremeno) ----------------------------------------- */
.sadrzaj-stranice{padding-top:var(--r8);padding-bottom:var(--r8)}
.sadrzaj-stranice__naslov{margin-bottom:var(--r4);font:400 clamp(32px,4vw,48px)/1.15 var(--akcent)}

/* Uski računar (1025–1180 px): manji razmaci u zaglavlju, inače red (logotipi, meni, jezik, Rezervišite, korpa)
   bude širi od ekrana i korpa izlazi desno (izmjereno 02.11.2026: 1053 px na 1025) */
@media (min-width:1025px) and (max-width:1180px){
  .zaglavlje__red,.zaglavlje .meni{gap:var(--r2)}
}

/* --- Tablet i mobitel ------------------------------------------------------ */
@media (max-width:1024px){
  /* Mobitel: hamburger lijevo, logotipi u sredini, korpa desno (kao na naslovnici) */
  .zaglavlje__red{position:relative;justify-content:space-between}
  .zaglavlje__meni-dugme{display:flex}
  .zaglavlje__logotipi{order:2;margin:0 auto}
  .zaglavlje__nav{order:5}
  .zaglavlje__akcije{order:3;margin-left:0;min-width:44px;justify-content:flex-end}
  /* Meni: tamni panel koji klizi slijeva, kao na naslovnici */
  .zaglavlje__nav{position:fixed;top:0;bottom:0;left:0;width:min(340px,86vw);margin:0;padding:80px 28px 32px;overflow-y:auto;background:var(--ponoc);border:0;
    transform:translateX(-100%);opacity:.6;visibility:hidden;box-shadow:0 0 0 100vmax rgba(28,25,22,0);
    transition:transform .3s cubic-bezier(.55,.06,.68,.19),opacity .3s ease,box-shadow .3s ease,visibility 0s linear .3s}
  .zaglavlje__nav.je-otvoren{transform:none;opacity:1;visibility:visible;box-shadow:0 0 0 100vmax rgba(28,25,22,.5);
    transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease,box-shadow .45s ease,visibility 0s}
  .zaglavlje__red .zaglavlje__meni-dugme[aria-expanded="true"]{position:relative;z-index:61}
  .zaglavlje__red .zaglavlje__meni-dugme[aria-expanded="true"] span{background:var(--krem)}
  .zaglavlje__panel-logo{display:flex;align-items:center;gap:var(--r2);margin-bottom:var(--r4);color:var(--zlato-svijetlo)}
  .zaglavlje__panel-logo .logo{height:26px;flex:0 1 auto;min-width:0}
  .zaglavlje__panel-logo .logo--amman-horiz{color:var(--krem)}   /* Amman krem, Sultan zlato (P17) */
  .zaglavlje__panel-logo .logo--sultan-horiz{color:var(--zlato)}
  .meni{flex-direction:column;gap:0}
  .meni a{padding:var(--r2) 0;border-bottom:1px solid rgba(237,230,218,.14);color:var(--zlato-svijetlo);font-size:14px}
  .meni a:hover,.meni .current-menu-item>a{color:var(--zlato)}
  /* Podmeni: uvijek otvoren (bez klika na glavnu stavku) */
  .zaglavlje .meni>li{display:block;height:auto}
 .zaglavlje .meni>li.menu-item-has-children>a::after{display:none}
  .zaglavlje .meni .sub-menu{display:block;position:static;min-width:0;padding:0 0 0 var(--r2);border:0;box-shadow:none;background:none;opacity:1;visibility:visible;transform:none}
 .zaglavlje .meni .sub-menu a{padding:12px 0;font-size:13px;font-weight:500;white-space:normal;color:rgba(237,230,218,.8)}
  .zaglavlje .meni .sub-menu a:hover{background:none;color:var(--zlato)}
  .meni li{position:relative}
}
@media (max-width:782px){
  .admin-bar .zaglavlje{top:46px}
}
/* Mobitel: do 700 px. Tablet (701–1024 px) ima svoj raspored; breakpointi mobitel/tablet su svuda isti (700, 1024) */
@media (max-width:700px){
  :root{--zaglavlje:64px}
  .zaglavlje__red{gap:var(--r2)}
  .zaglavlje__logotipi{gap:8px;min-width:0}
  .zaglavlje__logotipi .logo{height:26px}
  .zaglavlje__tekst{font-size:13px;letter-spacing:.1em}
  .zaglavlje__akcije{gap:12px;min-width:0}
  .zaglavlje__korpa{flex:0 0 auto;width:26px;height:26px}
  .zaglavlje__rezervisi{display:none}
  .hero{min-height:calc(100svh - var(--zaglavlje));align-items:flex-end}
  .hero__sadrzaj{padding-bottom:var(--r6)}
  .hero__dugmad .dugme{flex:1 1 100%}
  .saloni{padding-top:var(--r8)}
  .saloni__red{grid-template-columns:1fr}
  .salon__tijelo{padding:var(--r4) var(--r2) var(--r6)}
  .salon__logo{width:120px}
  .salon__dugmad{flex-direction:column;align-self:stretch}
}
@media (max-width:380px){
  .zaglavlje__logotipi .logo{height:22px}
  .zaglavlje__tekst{font-size:11.5px;letter-spacing:.08em}
  .zaglavlje__red{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* --- WooCommerce obavijesti (svuda): u stilu branda umjesto zadanog plavog okvira ------------ */
html body .woocommerce-message,html body .woocommerce-info,html body .woocommerce-error,html body .woocommerce-notice,html body .wc-block-components-notice-banner{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--r1) var(--r2);margin:0 0 var(--r3);padding:var(--r2) var(--r3);border:1px solid var(--linija);border-left:3px solid var(--zlato);border-radius:2px;background:var(--pijesak);color:var(--ponoc);font:400 14px/1.6 var(--sans);list-style:none;box-shadow:none;word-wrap:break-word}
html body .woocommerce-message::before,html body .woocommerce-info::before,html body .woocommerce-error::before,html body .woocommerce-notice::before{content:"";position:static;flex:0 0 8px;width:8px;height:8px;margin:0;background:var(--zlato);transform:rotate(45deg);font-size:0}
html body .woocommerce-info{border-left-color:var(--espresso)}
html body .woocommerce-info::before{background:var(--espresso)}
html body .woocommerce-error{border-left-color:#9B2C2C;background:#F8EFEC}
html body .woocommerce-error::before{background:#9B2C2C}
html body .woocommerce-error li{margin:0;padding:0;list-style:none}
html body .woocommerce-message a:not(.button),html body .woocommerce-info a:not(.button),html body .woocommerce-error a:not(.button),html body .woocommerce-notice a:not(.button){color:var(--espresso);font-weight:600;text-decoration:underline;text-decoration-color:var(--zlato);text-underline-offset:3px}
html body .woocommerce-message a:not(.button):hover,html body .woocommerce-info a:not(.button):hover,html body .woocommerce-error a:not(.button):hover{color:var(--ponoc)}
html body .woocommerce-message a.button,html body .woocommerce-info a.button{order:2;margin-left:auto;padding:10px var(--r2);border-radius:3px;background:var(--espresso);color:#fff;font:600 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}
html body .woocommerce-message a.button:hover,html body .woocommerce-info a.button:hover{background:var(--espresso-hover);color:#fff}
html body .wc-block-components-notice-banner>svg{fill:var(--zlato);background:transparent}
html body .wc-block-components-notice-banner.is-error{border-left-color:#9B2C2C;background:#F8EFEC}
@media (max-width:600px){
  html body .woocommerce-message a.button,html body .woocommerce-info a.button{margin-left:0;width:100%;text-align:center}
}
/* Tekst samo za čitače ekrana (WordPress ga ne učitava bez block-library CSS-a) */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}

/* --- Donji meni na mobitelu (D1, 30.10.2026): Meni · Usluge · Rezerviši · Korpa ------------------------------
   Espresso traka sa zlatnim rubom (Senad 02.11.2026) da se ističe i na krem sekcijama i na tamnom podnožju;
   zlato na espresso je svjetlija nijansa (--zlato-hover, kontrast ~5:1), obično zlato bi bilo preslabo za 10 px.
   Stalno vidljiv do 700 px (tablet ga nema: ima puno zaglavlje sa korpom i dugmetom Rezervišite); korpa na vrhu se
   tada skriva, hamburger ostaje (vidi dolje). Ispod zaglavlja i panela
   menija (z-index 45), panel rezervacije je ionako u gornjem sloju (<dialog>). Nema ga u korpi i na plaćanju. */
.donji-meni{display:none}
@media (max-width:700px){
  .donji-meni{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(4,1fr);padding:0 4px env(safe-area-inset-bottom);background:var(--espresso);border-top:1.5px solid var(--zlato);box-shadow:0 -6px 16px rgba(28,25,22,.25)}
  .donji-meni__stavka{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;padding:6px 2px;border:0;background:none;color:var(--zlato-svijetlo);font:600 10px/1.1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .donji-meni__stavka svg{width:22px;height:22px;flex:0 0 auto;color:var(--zlato-hover)}
  .donji-meni__stavka--glavna{color:var(--zlato-hover)}
  .donji-meni__stavka:focus-visible{outline-offset:-4px}
  .donji-meni__ikona{position:relative;display:flex}
  .donji-meni .donji-meni__broj{top:-6px;right:-10px;background:var(--zlato);color:var(--ponoc)}
  body:has(.donji-meni){padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  /* Korpa na vrhu se skriva (ima je donji meni). Hamburger ostaje gore (Senad 02.11.2026: navika korisnika i balans
     zaglavlja); kad je meni otvoren pretvara se u ×, pa se meni može zatvoriti i kad je otvoren donjim dugmetom. */
  body:has(.donji-meni) .zaglavlje__korpa,body:has(.donji-meni) .sp-traka__korpa{display:none}
  body:has(.donji-meni) .sp-traka .jezici--traka{margin-left:auto}   /* jezik ostaje desno kad nema korpe */
}