/* phpStudio - ArtGrbic | Light theme: paper + wood + blue accents */
:root{
  /* Paleta */
  --bg:#f5f0e8;          /* svetlo “papir” */
  --paper:#ffffff;       /* kartice */
  --ink:#222222;         /* osnovni tekst */
  --muted:#6a727c;       /* sekundarni tekst */
  --blue:#3b6ea5;        /* akcent (plava) */
  --blue-ink:#0f2a44;    /* tamna plava za tekst na akcentu */
  --wood:#d8c3a5;        /* topli ton (drvenasto) */
  --line:#e5ddd0;        /* linije (svetlo drvo) */

  --radius:16px;
  --pad:16px;
  --container:1000px;

  /* Stil senke blag i prirodan */
  --shadow: 0 6px 18px rgba(15, 18, 22, .08);
}

/* Globalno */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background: var(--bg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  /* “vodena/drvena” pozadina: kombinacija blagog šrafura + paper noise */
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(59,110,165,.08), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(216,195,165,.20), transparent 55%),
    linear-gradient(0deg, rgba(255,255,255,.9), rgba(255,255,255,.9));
  background-attachment: fixed;
}
a{color:var(--blue); text-decoration:none}
a:hover{opacity:.9}

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
main{padding:24px 0}

/* Topbar (svetao, papir) */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-weight:800;display:flex;gap:10px;align-items:center;color:#1c1f24}
.logo span{filter: saturate(1.1)}
.nav{display:flex;gap:12px}
.nav a{color:#1c1f24; font-weight:600; padding:10px 12px; border-radius:12px}
.nav a:hover{background:#f2ede5}

.btn{
  padding:10px 14px; border-radius:999px; font-weight:800;
  background: var(--blue); color: #fff; box-shadow: var(--shadow);
  border:1px solid rgba(15,42,68,.15);
}

/* Hero (mali head) */
.hero{margin:14px 0 18px}
.hero h1{font-size:22px;margin:0 0 8px;color:#1b2330}
.hero p{margin:0;color:#445065}

/* Search (velika pretraga) */
.search{
  display:flex; gap:8px; align-items:center;
  background: var(--paper);
  padding:8px; border-radius:999px;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.search input{
  flex:1; background:transparent; border:none; outline:none;
  padding:14px 16px; color:var(--ink); font-size:16px;
}
.search button{
  border:none; background: var(--blue); color:#fff;
  padding:12px 18px; border-radius:999px; font-weight:800; cursor:pointer;
  box-shadow: var(--shadow);
}

/* Filter badge */
.badge{
  display:inline-block;
  font-size:13px; font-weight:700;
  padding:6px 10px; border-radius:999px;
  background:#e8f0f8; color:#1b3b5c; border:1px solid #d4e1f0;
}

/* Lista kartica (jedna ispod druge na mobilnom) */
.list{display:grid;gap:12px;margin-top:16px}
.card{
  display:grid; grid-template-columns:88px 1fr auto; gap:12px; align-items:center;
  background: var(--paper); border:1px solid var(--line);
  border-radius: var(--radius); padding:10px; box-shadow: var(--shadow);
}
.card img{width:88px;height:110px;object-fit:cover;border-radius:12px}
.card h3{margin:0;font-size:16px;color:#1e2a39}
.card p{margin:6px 0 0;color:#5c6775;font-size:14px;line-height:1.45}
.card .more a{
  display:inline-block;padding:8px 12px;background:#eaf2fa;color:#143250;
  border:1px solid #d7e4f3;border-radius:10px;font-weight:700;
}

/* Detaljna stranica (koristićemo iste varijable kasnije) */
.price-old{text-decoration:line-through;color:#8a8f97}
.price-new{color:#1f7a35;font-weight:800}
.note-box{
  background:#fffdf8; border:1px solid #f0e6d6; border-radius:12px;
  padding:14px; color:#5a4a34;
}

/* Tabela (za admin) */
.table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}
.table th{background:#faf7f2;color:#3e3a33}

/* Footer */
.footer{padding:24px 0;color:#6d6b66;border-top:1px solid var(--line);margin-top:32px}

/* ===== MOBILNI BAR (još manja i elegantnija verzija) ===== */
.mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(28, 40, 51, 0.55); /* više providno */
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 0; /* 👈 tanja traka */
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
  z-index: 1000;
}

/* manji krugovi */
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;   /* 👈 manji prečnik */
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  text-decoration: none;
  transition: all 0.25s ease;
}

/* manja ikona */
.mobile-bar i {
  font-size: 22px; /* 👈 manja ikona */
  color: #fff;
  transition: transform 0.25s ease, color 0.25s ease;
}

/* animacija */
.mobile-bar a:hover i {
  transform: scale(1.15);
}

/* brendirane boje */
.mobile-bar a:nth-child(1) { background: linear-gradient(145deg, #f7d46c, #d8b233); } /* Poziv */
.mobile-bar a:nth-child(2) { background: linear-gradient(145deg, #25D366, #1fa855); } /* WhatsApp */
.mobile-bar a:nth-child(3) { background: linear-gradient(145deg, #7360f2, #5b49d9); } /* Viber */

/* boje ikona */
.mobile-bar i.fa-phone { color: #1a1a1a; }
.mobile-bar i.fa-whatsapp, 
.mobile-bar i.fa-viber { color: #fff; }

/* sakrij na desktopu */
@media (min-width: 900px) {
  .mobile-bar { display: none; }
}

/* Responsivnost */
@media (min-width:700px){
  .hero h1{font-size:28px}
  .card{grid-template-columns:110px 1fr auto}
  .card img{width:110px;height:140px}
}
.footer{ background:#1c2833; color:#fff; }
.footer a{ color:#fff; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
.footer .container{ text-align:center; padding:22px 16px; }
.footer p{ margin:0; }
.footer p:first-child{ margin-bottom:8px; }

/* 1) Osnovno (bez beline ispod) */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: #f5f1eb; /* glavna pozadina */
}

/* 2) Neka main zauzme punu širinu i gura footer na dno */
main {
  flex: 1 1 auto;
  width: 100%;
}

/* 3) Standardna širina kontejnera (ako je već nema u style.css) */
.container {
  max-width: 1000px;     /* po želji: 980px / 1100px */
  margin: 0 auto;
  padding: 0 16px;
}

/* 4) Footer bez beline; extra donji padding SAMO na mobilu (zbog mobile bar-a) */
.footer {
  background: #1c2833;
  color: #fff;
  text-align: center;
  padding: 24px 16px;   /* default na desktopu */
  margin-top: auto;
}

@media (max-width: 900px){
  .footer { padding-bottom: 70px; } /* da ga ne prekrije mobile bar */
}