/* Reset i sistemske promenljive */
* { box-sizing: border-box; scroll-behavior: smooth; }
:root{
  --accent:#8B5E34;   /* topla braon (primarna) */
  --accent2:#B08968;  /* svetlija braon (sekundarna) */
  --text:#2b211a;     /* tamno-braon tekst */
  --bg:#F7F3EE;       /* topla svetla pozadina */
  --card:#FFFCF7;     /* krem kartice */
  --shadow:0 8px 30px rgba(0,0,0,.08);
}
@media (prefers-reduced-motion: reduce){
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body { font-family: 'Poppins', sans-serif; margin:0; padding:0; background:var(--bg); color:var(--text); line-height:1.5; }

/* NAV */
.navbar{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid rgba(96,75,57,.14); }
.nav-inner{ max-width:1200px; margin:0 auto; padding:.6rem 1rem; display:flex; align-items:center; justify-content:space-between; min-height:50px; }
.nav-links{ display:flex; gap:.6rem; align-items:center; }
.nav-links a{ text-decoration:none; color:#222; font-weight:600; padding:.5rem .9rem; border-radius:12px; }
.nav-links a:hover{ background:#fff; box-shadow:var(--shadow); }
.nav-cta{ background:var(--accent); color:#fff !important; border-radius:999px; }
.nav-cta:hover{ filter:brightness(1.05); }
section{ scroll-margin-top:80px; }

/* Logo u navbaru */
.brand{ display:flex; align-items:center; gap:.4rem; color:var(--accent); text-decoration:none; font-weight:800; }
.brand-logo{
  width: clamp(128px, 13vw, 190px); height:auto; display:block;
}
@media (min-width: 1200px){
  .brand-logo{ width: clamp(150px, 14vw, 200px); }
}
@media (max-width: 600px){
  .brand-logo{ width: 108px; }
  .nav-links a{ padding:.36rem .56rem; font-size:.9rem; }
}

/* Utility za skrivanje teksta, ali čitljivost za screenreadere */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* HERO (sa toplim filterom preko slike) */
header{
  min-height: 86vh;
  background:
    /* tamni sloj za čitljivost teksta */
    linear-gradient(to bottom, rgba(42,33,25,.45), rgba(42,33,25,.18)),
    /* „warm tint“ sloj – lagano bež/braon toniranje */
    linear-gradient(180deg, rgba(176,137,104,.16), rgba(176,137,104,.16)),
    url('img/hero-printshop.webp') center/cover no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding:2rem;
}
header h1{ font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin:0; animation: fadeInDown 1.2s ease; }
header p{ font-size: clamp(1rem, 2.2vw, 1.25rem); margin-top:.5rem; animation: fadeIn 1.5s ease; }
.cta-btn{ background:#fff; color:var(--accent); padding:1rem 2rem; border-radius:999px; font-weight:700; text-decoration:none; margin-top:1.5rem; display:inline-block; transition:transform .3s, box-shadow .3s, background .3s; box-shadow:var(--shadow); }
.cta-btn:hover{ background:#efe4d6; transform: translateY(-2px); }

/* SECTIONS */
.section{ padding:4rem 1rem; max-width:1200px; margin:auto; }
h2{ text-align:center; margin-bottom:2rem; font-size: clamp(1.4rem, 3vw, 2rem); }

/* BOJE — 1 (tel) / 2 (tablet) / 3 (mali desktop) / 5 (veliki desktop) */
#boje .features{
  display:grid; gap:1.1rem; grid-template-columns: 1fr;
  max-width:1100px; margin:0 auto;
}
@media (min-width: 600px){ #boje .features{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ #boje .features{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ #boje .features{ grid-template-columns: repeat(5, 1fr); } }

#boje .feature{
  background: var(--card);
  border: 1px solid #e8e2da;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: .9rem .9rem 1rem;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  transition: transform .18s ease, box-shadow .18s ease;
}
#boje .feature:hover{ transform: translateY(-2px); box-shadow: 0 16px 42px rgba(0,0,0,.12); }

#boje .feature img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: linear-gradient(180deg, #f3eee7, #f7f3ee);
  border-radius: 12px;
  padding: .75rem;
  display:block;
  transition: transform .25s ease;
}
#boje .feature:hover img{ transform: scale(1.03); }

#boje .feature p{
  margin: .8rem 0 0; font-weight: 700; color: var(--text); letter-spacing: .2px;
}

/* WHY US — 1 / 2 / 3 kolone */
#zasto-mi .features{
  display:grid; gap:1rem; grid-template-columns: 1fr;
  max-width: 1000px; margin: 0 auto;
}
@media (min-width: 640px){ #zasto-mi .features{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px){ #zasto-mi .features{ grid-template-columns: repeat(3, 1fr); } }

#zasto-mi .feature{
  background: var(--card);
  border: 1px solid #e8e2da;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1rem 1rem 1.1rem;
  display: grid; grid-template-columns: 56px 1fr; align-items: center; column-gap: 1rem;
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: left;
}
#zasto-mi .feature:hover{ transform: translateY(-2px); box-shadow: 0 16px 42px rgba(0,0,0,.12); }

#zasto-mi .feature::before{
  content: "⏱️";
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(176,137,104,.18), rgba(139,94,52,.18));
  color: var(--accent); font-size: 1.1rem;
}
#zasto-mi .feature:nth-child(2)::before{ content: "🖨️"; }
#zasto-mi .feature:nth-child(3)::before{ content: "📦"; }

#zasto-mi .feature p{ margin: 0; line-height: 1.45; color: var(--text); }
#zasto-mi .feature p b{ display:block; font-size: 1.05rem; margin-bottom: .25rem; color: var(--accent); }
#zasto-mi h2{ margin-bottom: 1.2rem; }

/* Animacije */
@keyframes fadeUp { from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }
@keyframes fadeInDown { from{ opacity:0; transform:translateY(-12px);} to{ opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

/* PRICING – čist, responzivan */
#cenovnik .price-card{
  background: var(--card);
  border:1px solid #e8e2da;
  border-radius:16px;
  box-shadow: var(--shadow);
  padding: 1.5rem;
  max-width: 880px;
  margin: 0 auto;
  overflow-x:auto;
}
#cenovnik table{
  width: 100%; border-collapse: separate; border-spacing: 0;
  min-width: 520px;
  font-size: clamp(.95rem, 1.1vw, 1rem);
}
#cenovnik thead th{
  background: var(--accent); color: #fff; position: sticky; top: 0; z-index: 1;
  padding: 14px 16px; letter-spacing: .2px;
}
#cenovnik thead th:first-child{ border-top-left-radius: 12px; }
#cenovnik thead th:last-child{  border-top-right-radius: 12px; }
#cenovnik tbody td{ padding: 14px 16px; border-bottom: 1px solid #e8e2da; }

/* zebra + hover */
#cenovnik tbody tr:nth-child(odd){  background: #fff; }
#cenovnik tbody tr:nth-child(even){ background: #FFFCF7; }
#cenovnik tbody tr:hover{ background: #f4ede4; }

/* centriraj obe kolone */
#cenovnik thead th, #cenovnik tbody td{ text-align:center; }
#cenovnik td:first-child, #cenovnik th:first-child,
#cenovnik td:last-child,  #cenovnik th:last-child{
  text-align:center; white-space: normal; font-variant-numeric: tabular-nums;
}
@media (max-width: 600px){
  #cenovnik .price-card{ padding: 1rem; }
  #cenovnik th, #cenovnik td{ padding: 10px 12px; }
}

/* PORUDŽBINA – nova forma (2 kolone na ≥720px) */
#porudzbina form.quote-form{
  background: var(--card);
  border: 1px solid #e8e2da;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
#porudzbina .grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1rem;
}
@media (min-width: 720px){
  #porudzbina .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
#porudzbina .full{ grid-column: 1 / -1; }

#porudzbina .field{ display: grid; gap: .4rem; }
#porudzbina .field label{ font-weight: 700; color: var(--text); }
#porudzbina .req{ color: var(--accent); margin-left: .15rem; }

/* Inputs */
#porudzbina input, #porudzbina select, #porudzbina textarea{
  width: 100%;
  padding: .9rem 1rem;
  border-radius: 10px;
  border: 1px solid #e8e2da;
  font-size: 1rem;
  outline: none;
  background: #fff;
  transition: box-shadow .2s, border-color .2s, background-color .2s;
}
#porudzbina input::placeholder, #porudzbina textarea::placeholder{ color: rgba(43,33,26,.55); }
#porudzbina input:focus, #porudzbina select:focus, #porudzbina textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(139,94,52,.16);
  background: #fff;
}

/* Select sa prilagođenom strelicom */
#porudzbina select{
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238B5E34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 16px;
  padding-right: 2.2rem;
}

/* Tel/number UX */
#porudzbina input[type="number"]{ -moz-appearance: textfield; }
#porudzbina input::-webkit-outer-spin-button,
#porudzbina input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* Radio grupa */
#porudzbina .contact-pref{
  border: 1px dashed #e3d5c3;
  border-radius: 12px;
  padding: .8rem .9rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center;
}
#porudzbina .contact-pref legend{
  font-weight: 700; color: var(--accent); padding: 0 .3rem; margin-left: .2rem;
}
#porudzbina .contact-pref input[type="radio"]{ accent-color: var(--accent); }

/* Saglasnost */
#porudzbina .consent{
  display: flex; align-items: center; gap: .6rem;
  color: rgba(43,33,26,.9);
}
#porudzbina .consent input{ accent-color: var(--accent); }

/* Dugme */
#porudzbina .btn-primary{
  background: var(--accent); color:#fff;
  padding: 1rem 1.25rem; border:none; border-radius:12px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: transform .2s, background .2s;
  justify-self: start;
}
#porudzbina .btn-primary:hover{ background:#6f4b2a; transform: translateY(-1px); }

/* Napomena ispod dugmeta */
#porudzbina .form-note{ align-self: center; color: rgba(43,33,26,.75); margin: 0; }

/* Mobilna zbijenost */
@media (max-width: 600px){
  #porudzbina form.quote-form{ padding: 1.1rem; }
  #porudzbina .btn-primary{ width: 100%; justify-self: stretch; } /* full-width dugme na mobilu */
}

/* QUICK CONTACT BUTTONS */
.contact-buttons{ display:flex; justify-content:center; gap:1rem; margin-top:1.2rem; flex-wrap:wrap; }
.contact-buttons a{ padding:.9rem 1.25rem; border-radius:999px; color:#fff; font-weight:700; text-decoration:none; transition: transform .2s, filter .2s; box-shadow:var(--shadow); }
.contact-buttons a:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.whatsapp{ background:#25D366; } .viber{ background:#7360F2; }

/* MAP / LOCATION */
.map-card{ background:var(--card); border-radius:16px; box-shadow:var(--shadow); padding:0; max-width:980px; margin:0 auto; overflow:hidden; }
.map-top{ padding:1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid #e8e2da; }
.map-top .addr{ font-weight:700; }
.map-btn{ background:#fff; color:var(--accent); border:1px solid #e3d5c3; }
#map{ width:100%; height:420px; }
.center{ text-align:center; } .mt-6{ margin-top:1.5rem; }

/* FAQ – elegantan accordion sa ikonama */
#faq{ max-width: 880px; margin: 0 auto; }
#faq details{
  background: var(--card); border: 1px solid #e8e2da; border-radius: 14px;
  box-shadow: var(--shadow); padding: .6rem 1rem; margin: .8rem 0;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
#faq details[open]{
  background: #fff; border-color: rgba(139,94,52,.35);
  box-shadow: 0 16px 42px rgba(0,0,0,.10);
  border-left: 3px solid var(--accent); padding-left: calc(1rem - 2px);
}
#faq summary{
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; align-items: center; gap: .7rem;
  padding: .4rem .25rem .4rem .1rem;
  position: relative; color: var(--text); padding-right: 1.6rem;
}
#faq summary::-webkit-details-marker{ display:none; }
#faq summary::before{
  content: "❓"; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(176,137,104,.18), rgba(139,94,52,.14));
  color: var(--accent); font-size: 1rem;
  box-shadow: inset 0 0 0 1px rgba(139,94,52,.25);
}
#faq details:nth-of-type(1) summary::before{ content: "❓"; }
#faq details:nth-of-type(2) summary::before{ content: "⏱️"; }
#faq details:nth-of-type(3) summary::before{ content: "🎨"; }
#faq summary::after{
  content: ""; width: 14px; height: 14px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg); position: absolute; right: .25rem;
  transition: transform .2s ease, opacity .2s ease; opacity: .85;
}
#faq details[open] summary::after{ transform: rotate(45deg); opacity: 1; }
#faq details:focus-within{ outline: none; box-shadow: 0 0 0 4px rgba(139,94,52,.16); border-color: var(--accent); }
#faq details > p{
  margin: .4rem 0 .2rem; color: rgba(43,33,26,.9); line-height: 1.6;
  padding-right: 1.8rem; animation: faqOpen .22s ease;
}
@keyframes faqOpen{ from{ opacity:0; transform: translateY(-4px);} to{ opacity:1; transform: translateY(0);} }
#faq h2{ margin-bottom: 1.1rem; }

/* GALLERY – 3 u redu na desktopu, 2 na tabletima, 1 na telefonu */
.gallery-grid{ display:grid; gap:1.2rem; grid-template-columns: 1fr; }
@media (min-width: 600px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); } }
.gallery-item{
  background: var(--card);
  border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column; border: 1px solid #e8e2da;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery-item:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.gallery-item img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .25s ease; }
.gallery-item:hover img{ transform: scale(1.03); }
.gallery-item figcaption{
  padding: .9rem 1rem; font-weight: 600; font-size: .95rem; color: var(--text);
  border-top: 1px solid #f1f1f1; min-height: 52px; display: flex; align-items: center;
}
#radovi .center.mt-6{ color: rgba(43,33,26,.75); margin-top: .6rem; }

/* LIGHTBOX */
.lightbox{ position:fixed; inset:0; background: rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; flex-direction:column; padding: 2rem; z-index: 2000; }
.lightbox[aria-hidden="false"]{ display:flex; }
.lightbox img{ max-width: min(96vw, 1200px); max-height: 80vh; border-radius: 10px; box-shadow: 0 20px 80px rgba(0,0,0,.45); }
.lightbox-caption{ margin-top: .8rem; color:#fff; font-weight:600; text-align:center; }
.lightbox-close{ position:absolute; top:18px; right:18px; background:transparent; color:#fff; border:none; font-size:2rem; cursor:pointer; line-height:1; }

/* VIDEO */
.video-card{ background:#fff; border-radius:16px; box-shadow:var(--shadow); max-width:980px; margin:0 auto; overflow:hidden; padding:1rem; }
.video-card video{ width:100%; height:auto; border-radius:12px; display:block; }

/* FOOTER */
.floating-wa{ position:fixed; right:18px; bottom:18px; background:#25D366; color:#fff; padding:.9rem 1.1rem; border-radius:999px; font-weight:700; text-decoration:none; box-shadow:var(--shadow); }
.floating-wa:hover{ filter:brightness(1.05); transform:translateY(-1px); transition:.2s; }
footer{ background:#2a2119; color:#eadfce; text-align:center; padding:1.6rem; margin-top:3rem; font-size:.95rem; }
footer a{ color:#fff; text-decoration: underline; }


/* --- FORM FIX PATCH --- */
/* primeni “card” stil i kad nema .quote-form klase */
#porudzbina form.quote-form,
#porudzbina form{
  background: var(--card);
  border: 1px solid #e8e2da;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

/* grid fallback – radi i kad je form bez klase */
#porudzbina form .grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:720px){
  #porudzbina form .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
#porudzbina .full{ grid-column:1/-1; }

/* inputs, select, textarea */
#porudzbina input, #porudzbina select, #porudzbina textarea{
  width:100%; padding:.9rem 1rem; border-radius:10px;
  border:1px solid #e8e2da; background:#fff; font-size:1rem;
  transition: box-shadow .2s, border-color .2s, background-color .2s;
}
#porudzbina input:focus, #porudzbina select:focus, #porudzbina textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(139,94,52,.16);
}
#porudzbina select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238B5E34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:16px; padding-right:2.2rem;
}
#porudzbina input[type="number"]{ -moz-appearance:textfield; }
#porudzbina input::-webkit-outer-spin-button,
#porudzbina input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* fieldset + consent (fallback i za slučaj bez klasa) */
#porudzbina fieldset.contact-pref,
#porudzbina form fieldset{
  border:1px dashed #e3d5c3; border-radius:12px; padding:.8rem .9rem;
  display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center;
}
#porudzbina fieldset.contact-pref legend,
#porudzbina form fieldset legend{ font-weight:700; color:var(--accent); padding:0 .3rem; }

#porudzbina label.consent,
#porudzbina .consent{ display:flex; align-items:center; gap:.6rem; color:rgba(43,33,26,.9); }
#porudzbina .consent input{ accent-color:var(--accent); }

/* dugme – stilizuj čak i ako nema .btn-primary klase */
#porudzbina .btn-primary,
#porudzbina button[type="submit"]{
  background:var(--accent); color:#fff; padding:1rem 1.25rem;
  border:none; border-radius:12px; font-weight:700; cursor:pointer;
  transition:transform .2s, background .2s; justify-self:start;
}
#porudzbina .btn-primary:hover,
#porudzbina button[type="submit"]:hover{ background:#6f4b2a; transform:translateY(-1px); }

/* mobilno – celo dugme u širinu */
@media (max-width:600px){
  #porudzbina button[type="submit"]{ width:100%; justify-self:stretch; }
}
/* ===== Footer ===== */
.site-footer{
    background:#2a2119;           /* tamna braon */
    color:#eadfce;                /* topla, čitljiva */
    margin-top:3rem;
    border-top:1px solid rgba(139,94,52,.25);
  }
  .site-footer a{ color:inherit; text-decoration:none; }
  .site-footer a:hover{ text-decoration:underline; }
  
  .footer-inner{
    max-width:1200px;
    margin:0 auto;
    padding:2rem 1rem;
    display:grid;
    gap:1.2rem 1.5rem;
    grid-template-columns: 1fr;   /* tel: 1 kolona */
  }
  @media (min-width: 720px){
    .footer-inner{ grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  }
  
  .footer-col h3{
    margin:.2rem 0 .6rem;
    font-size:1rem;
    letter-spacing:.3px;
    color:#f0e9df;
  }
  
  .footer-brand .footer-logo{
    max-height:44px; height:auto; width:auto; display:block; margin-bottom:.6rem;
    /* Ako ti logo na tamnoj pozadini deluje taman, možeš da uključiš invert:
    filter: brightness(1.05) contrast(1.05);
    */
  }
  .footer-brand p{ margin:.4rem 0 0; color:#e7dccb; }
  
  .site-footer address{ font-style:normal; line-height:1.6; }
  .workhours{ margin:.4rem 0 0; color:#e4d7c4; }
  
  .footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
  .footer-links a{ opacity:.92; }
  .footer-links a:hover{ opacity:1; }
  
  .footer-social{ display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
  .footer-social a{
    display:inline-block; padding:.5rem .75rem; border-radius:999px; font-weight:700;
    box-shadow: var(--shadow);
  }
  .footer-social .wa{ background:#25D366; color:#fff; }
  .footer-social .vb{ background:#7360F2; color:#fff; }
  
  .footer-cta .btn{
    display:inline-block; padding:.8rem 1.1rem; border-radius:12px; font-weight:700;
    text-decoration:none; margin-right:.5rem; margin-top:.3rem;
    transition:transform .15s ease, filter .15s ease, background .15s ease;
  }
  .footer-cta .btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
  .footer-cta .btn-primary{ background: var(--accent); color:#fff; }
  .footer-cta .btn-outline{ border:1px solid rgba(234,223,206,.5); color:#eadfce; }
  
  .footer-bottom{
    border-top:1px solid rgba(234,223,206,.15);
    padding:.9rem 1rem; text-align:center; font-size:.9rem;
  }

  /* ===== Footer centriranje ===== */
.site-footer{ text-align:center; }
.footer-inner{
  justify-items:center;                 /* centriraj sadržaj svake kolone */
}
.footer-col{ text-align:center; max-width: 420px; }
.site-footer address a{ display:inline-block; } /* lepši prelom linija */
.footer-links{
  display: inline-grid;                 /* lista linkova centrirana */
  gap:.35rem;
  text-align:center;
}
.footer-cta .btn{ margin:.35rem .4rem 0; }      /* dugmići u istom redu, centrirano */
.footer-bottom small{ opacity:.9; }
/* === FOOTER FIX: 3 jednake kolone + centriranje === */
.site-footer{ text-align:center; }

.site-footer .footer-inner{
  max-width: 980px;              /* uži kontejner da ne "beži" u stranu */
  margin: 0 auto;                /* centriraj kontejner */
  padding: 2rem 1rem;
  display: grid;
  gap: 1.2rem 1.5rem;
  grid-template-columns: 1fr;    /* telefon: 1 kolona */
  justify-content: center;       /* centriraj mrežu u kontejneru */
  justify-items: center;         /* centriraj sadržaj svake kolone */
}

@media (min-width: 720px){
  .site-footer .footer-inner{
    /* desktop/tablet: TAČNO TRI kolone jednake širine */
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

.site-footer .footer-col{
  text-align: center;            /* poravnaj tekst u sredinu */
  max-width: 420px;
}

.site-footer address a{ 
  display: inline-block;         /* lep prelaz linija u address */
}

.site-footer .footer-links{
  display: inline-grid;          /* centrirana lista linkova */
  gap: .35rem;
  text-align: center;
  justify-items: center;
}

.site-footer .footer-cta .btn{
  margin: .35rem .4rem 0;        /* dugmad lepo u sredini */
}

.site-footer .footer-bottom{
  text-align: center;
}

/* === MAP TOP ALIGN FIX === */
/* === MAP TOP: kompaktno, savršeno poravnanje === */
.map-top{
    display: grid;
    grid-auto-flow: column;           /* jedan red: adresa + dugme */
    align-items: center;              /* vertikalno poravnanje */
    justify-content: center;          /* centriraj kao celinu */
    gap: .8rem 1rem;
  
    width: min(100%, 760px);
    margin: .5rem auto;
    padding: .6rem .9rem;
    border-bottom: 1px solid #e8e2da;
  }
  
  .map-top .addr{
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;                   /* skini “višak” visine reda */
    white-space: nowrap;              /* ne lomi pored dugmeta */
    display: inline-flex;
    align-items: center;
  }
  
  /* Reset dugmeta da ne vuče .cta-btn dimenzije */
  .map-card .map-btn{
    all: unset;                       /* očisti sve nasleđeno iz .cta-btn */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .52rem .9rem;            /* kompaktno */
    line-height: 1;                   /* identična visina kao tekst */
    font: inherit;
    font-weight: 700;
    color: var(--accent);
    background: #fff;
    border: 1px solid #e3d5c3;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;            /* link bez podvlačenja */
    box-shadow: none;
    transition: background .2s ease, transform .2s ease;
  }
  .map-card .map-btn:hover{
    background: #f6eee3;
    transform: translateY(-1px);
  }
  
  /* Telefon: dozvoli prelome u 2 reda i centriraj oba */
  @media (max-width: 520px){
    .map-top{
      grid-auto-flow: row;
      justify-items: center;
      text-align: center;
    }
    .map-top .addr{ white-space: normal; }
  }
  
  /* Ne primenjuj belo hover pozadinu na CTA dugme */
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta):focus-visible{
  background:#fff;
  box-shadow: var(--shadow);
}

/* CTA – uvek kontrastno, sa lepim hoverom */
.nav-links .nav-cta,
.nav-links .nav-cta:visited{
  background: var(--accent);
  color: #fff !important;
}

.nav-links .nav-cta:hover,
.nav-links .nav-cta:focus-visible{
  background: var(--accent2);        /* svetlija braon na hover */
  color: #fff !important;             /* ostaje beo tekst */
  filter: none;                       /* skini globalni filter */
  box-shadow: 0 6px 18px rgba(139,94,52,.25);
  transform: translateY(-1px);
  outline: none;
}
/* ===== RESPONSIVE POLISH PACK ===== */

/* Tablet i manji desktop */
@media (max-width: 900px){
    header{
      min-height: 80vh;
      padding: 1.5rem;
    }
    .section{
      padding: 3rem 1rem;
    }
    #boje .features,
    #zasto-mi .features{
      gap: .9rem;
    }
  }
  
  /* Telefoni i uski tableti */
  @media (max-width: 760px){
    /* NAV: razbij u 2 reda i centriraj linkove */
    .nav-inner{
      flex-wrap: wrap;
      row-gap: .45rem;
    }
    .nav-links{
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      gap: .4rem .5rem;
    }
    .nav-links a{
      padding: .42rem .65rem;
      font-size: .95rem;
    }
    .nav-links .nav-cta{
      padding: .45rem .8rem;
    }
  
    /* HERO: manji tekst, kompaktniji CTA */
    header h1{ font-size: clamp(1.8rem, 6.2vw, 2.2rem); }
    header p{ font-size: 1rem; max-width: 28ch; }
    .cta-btn{ padding: .85rem 1.4rem; }
  
    /* FORMA: mekši padding */
    #porudzbina form.quote-form{
      padding: 1.1rem;
    }
  
    /* Mapa: uvek lepo poravnanje + uži top bar */
    .map-top{
      grid-auto-flow: row;
      justify-items: center;
      text-align: center;
      gap: .6rem;
      width: 100%;
      padding: .5rem .75rem;
    }
    .map-top .addr{ white-space: normal; }
  }
  
  /* Mali telefoni (vrlo usko) */
  @media (max-width: 480px){
    /* NAV: dozvoli horizontalni skrol čipova umesto lomljenja u više redova */
    .nav-links{
      overflow-x: auto;
      white-space: nowrap;
      justify-content: flex-start;
      padding-bottom: .2rem;
      gap: .35rem;
    }
    .nav-links::-webkit-scrollbar{ display: none; }
    .nav-links a{ display: inline-block; }
  
    /* LOGO: još mrvicu kompaktniji da ništa ne “puca” */
    .brand-logo{ width: 96px; }
  
    /* HERO */
    header{ min-height: 68vh; }
    .cta-btn{ width: 100%; max-width: 320px; }
  
    /* Tabela i mapa: niže visine i kompaktnije */
    #map{ height: 320px; }
    #cenovnik .price-card{ padding: 1rem; }
    #cenovnik th, #cenovnik td{ padding: 10px 12px; }
  }
  
  /* Sitna optika: ujednači visinu “addr” i dugmeta u map-top na svim uređajima */
  .map-top .addr{
    display: inline-flex;
    align-items: center;
    line-height: 1.1;
    padding: .15rem 0;
  }
  .map-card .map-btn{
    line-height: 1;            /* da dugme i tekst budu savršeno u ravni */
    padding: .5rem .85rem;
  }
/* ===== BURGER MENI ===== */
:root{ --navH: 56px; }

/* Dugme – krij na većim ekranima */
.nav-toggle{
  display:none;
  -webkit-tap-highlight-color: transparent;
  border:none; background:transparent; cursor:pointer;
  width:40px; height:40px; padding:0; margin-left:auto;
  align-items:center; justify-content:center;
}
.nav-toggle .bar{
  display:block; width:22px; height:2px; background: var(--text);
  border-radius:2px; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle .bar + .bar{ margin-top:5px; }

/* Off-canvas/dropdown panel na mobilu */
@media (max-width: 760px){
  .nav-toggle{ display:inline-flex; }

  /* prekucaj prethodna pravila za .nav-links na mobilu */
  .nav-links{
    position: fixed;
    top: var(--navH);
    left: 0; right: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: saturate(140%) blur(6px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: .75rem .9rem 1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease;
    border-bottom: 1px solid rgba(96,75,57,.14);
  }
  .nav-links.show{
    max-height: 70vh;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a{
    background:#fff;
    border-radius: 12px;
    padding: .75rem 1rem;
    box-shadow: var(--shadow);
    display:block;
  }
  .nav-links .nav-cta{
    text-align:center;
  }

  /* Kad je otvoreno – animacija u „X“ */
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2){
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Zaključaj skrol kad je meni otvoren */
  body.menu-open{ overflow:hidden; }

  /* Sitna optika: navbar visina da pokrije dugme */
  .nav-inner{ min-height: var(--navH); }
}

/* Mikro-podešavanje kontrasta dugmeta na svetloj pozadini */
@media (max-width: 760px){
  .navbar{ background: rgba(255,255,255,.95); }
}
/* === BURGER FIX: složi crtice vertikalno i utegni animaciju === */
.nav-toggle{
    display: inline-flex;
    flex-direction: column;      /* <— KLJUČNO: kolona, ne red */
    align-items: center;
    justify-content: center;
    gap: 5px;                    /* razmak između crtica */
    width: 40px; height: 40px;
    padding: 0; border: 0; background: transparent;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* crtice */
  .nav-toggle .bar{
    width: 22px; height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  
  /* pregazi staro margin-top ako postoji */
  .nav-toggle .bar + .bar{ margin-top: 0 !important; }
  
  /* kad je otvoren meni – zbij crtice da se preklapaju u X */
  .nav-toggle[aria-expanded="true"]{ gap: 0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1){
    transform: translateY(4px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2){
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3){
    transform: translateY(-4px) rotate(-45deg);
  }
    /* ===== NAV: mobilni panel ===== */
@media (max-width: 900px){
    .nav-inner{ gap:.4rem; }
  
    /* pokaži burger na mobilu */
    .nav-toggle{ display:inline-flex; }
  
    /* pretvori linkove u "slide-down" panel ispod navbara */
    .nav-links{
      position: fixed;
      top: 58px;              /* ~ visina navigacije; prilagodi ako ti treba */
      left: 0;
      right: 0;
      display: grid;
      gap: .2rem;
      padding: .8rem 1rem 1rem;
      background: rgba(255,255,255,.98);
      border-bottom: 1px solid rgba(96,75,57,.14);
      transform: translateY(-120%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: transform .24s ease, opacity .24s ease, visibility .24s;
      z-index: 999;          /* iznad sadržaja */
    }
    .nav-links.open{
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .nav-links a{
      display:block;
      padding:.85rem 1rem;
      border-radius: 10px;
    }
    .nav-links a:hover{
      background:#fff;
      box-shadow: var(--shadow);
    }
    .nav-links .nav-cta{
      justify-self: start;
    }
  
    /* kad je meni otvoren – ne skroluj pozadinu */
    body.no-scroll{ overflow:hidden; }
  }
  
  /* Desktop fallback (u slučaju da je nešto sakrilo linkove) */
  @media (min-width: 901px){
    .nav-toggle{ display:none !important; }
    .nav-links{
      position: static !important;
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      display: flex !important;
      gap: .6rem;
      background: transparent;
      border: 0;
      padding: 0;
    }
  }
  
  /* ===== NAV: jedinstveni mobilni panel ===== */
:root{ --navH: 56px; } /* fallback visina bara */

.nav-toggle{
  display:none;
  -webkit-tap-highlight-color: transparent;
  border:none; background:transparent; cursor:pointer;
  width:40px; height:40px; padding:0; margin-left:auto;
  align-items:center; justify-content:center;
  flex-direction: column; gap:5px;
}
.nav-toggle .bar{
  width:22px; height:2px; background: var(--text);
  border-radius:2px; transition: transform .2s ease, opacity .2s ease;
}
/* animacija u X */
.nav-toggle[aria-expanded="true"]{ gap:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-4px) rotate(-45deg); }

/* MOBILNO: panel */
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }

  .nav-links{
    position: fixed;
    top: var(--navH, 56px);
    left: 0; right: 0;
    z-index: 999;
    background: rgba(255,255,255,.98);
    backdrop-filter: saturate(140%) blur(6px);
    display: grid;
    gap: .5rem;
    padding: .8rem 1rem 1rem;
    border-bottom: 1px solid rgba(96,75,57,.14);

    /* poništi stara pravila koja su skrivala panel */
    max-height: none !important;
    overflow: visible !important;

    transform: translateY(-120%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .24s ease, opacity .24s ease, visibility .24s ease;
  }
  .nav-links.open{
    transform: translateY(0);
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .nav-links a{
    display:block; padding:.85rem 1rem; border-radius:12px;
    background:#fff; box-shadow: var(--shadow);
  }
  .nav-links .nav-cta{ text-align:center; }
  body.no-scroll{ overflow:hidden; }
}

/* DESKTOP: normalni raspored */
@media (min-width: 901px){
  .nav-toggle{ display:none !important; }
  .nav-links{
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
    gap: .6rem;
    background: transparent;
    border: 0;
    padding: 0;
  }
}
/* === CENOVNIK: responsive kartice na malim ekranima === */
@media (max-width: 560px){
    #cenovnik .price-card{
      padding: 1rem;
      overflow: visible;              /* više nam ne treba horizontalni skrol */
    }
    #cenovnik table{
      width: 100%;
      min-width: 0 !important;        /* poništi min-width:520px */
      border-collapse: separate;
      border-spacing: 0;
    }
    #cenovnik thead{
      position: absolute;             /* sakrij zaglavlje, ali zadrži semantiku */
      left: -9999px; top: -9999px;
      height: 1px; width: 1px; overflow: hidden;
    }
    #cenovnik tbody{
      display: grid;
      gap: .75rem;
    }
    #cenovnik tbody tr{
      display: grid;
      grid-template-columns: 1fr;
      gap: .35rem;
      background: #fff;
      border: 1px solid #e8e2da;
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: .8rem 1rem;
    }
    #cenovnik tbody td{
      display: grid;
      grid-template-columns: 1fr auto;    /* labela | vrednost */
      align-items: center;
      gap: .75rem;
      padding: 0;                          /* skinemo unutrašnji padding */
      border: 0;                            /* bez donje linije između redova */
    }
    /* Prva ćelija = Dimenzija */
    #cenovnik tbody td:nth-child(1)::before{
      content: "Dimenzija";
      font-weight: 700;
      color: var(--text);
      opacity: .85;
    }
    /* Druga ćelija = Cena */
    #cenovnik tbody td:nth-child(2)::before{
      content: "Cena (500 kom sa štampom)";
      font-weight: 700;
      color: var(--text);
      opacity: .85;
    }
  
    /* sitna tipografija da stane lepo */
    #cenovnik tbody td{
      font-size: 1rem;
    }
  }