/*
Theme Name: Upoznavanje Oglasi
Theme URI: https://example.com
Author: Custom
Description: Moderna WordPress tema za sajt sa ličnim oglasima i upoznavanjem. Responzivna, roze-bela paleta, pretraga po gradu i polu, dugmad za poziv i chat.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: upoznavanje-oglasi
*/

/* ===== Token sistem =====
   --pink-primary: #E8437B  (glavna roze boja, dugmad, akcenti)
   --pink-dark:    #C22C60  (hover, tamniji roze)
   --plum:         #3D1930  (tamni tekst, header pozadina)
   --blush:        #FFF3F6  (svetla pozadina sekcija)
   --white:        #FFFFFF
   --gold:         #F5B942  (badge NOVO, mali akcenti)
   --gray-text:    #6B5B63
*/

:root{
  --pink-primary:#E8437B;
  --pink-dark:#C22C60;
  --plum:#3D1930;
  --blush:#FFF3F6;
  --white:#ffffff;
  --gold:#F5B942;
  --gray-text:#6b5b63;
  --radius:16px;
  --shadow:0 8px 24px rgba(61,25,48,.08);
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--blush);
  color:var(--plum);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Playfair Display',Georgia,serif;
  margin:0 0 .5em;
  color:var(--plum);
}
a{color:var(--pink-primary);text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1100px;margin:0 auto;padding:0 20px;}
button{font-family:inherit;cursor:pointer;}

/* ===== Header ===== */
.site-header{
  background:linear-gradient(135deg,var(--plum) 0%,#5a2447 100%);
  padding:18px 0;
  position:relative;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  position:relative;
}
.site-branding{display:flex;align-items:center;gap:14px;}
.site-branding img{
  max-height:90px;
  width:auto;
  border-radius:12px;
}
.site-branding .site-title{
  color:#fff;
  font-size:1.4rem;
  margin:0;
}
.site-branding .site-title a{color:#fff;}
.site-tagline{
  color:#f5d5e2;
  font-size:.85rem;
  margin-top:2px;
}
.header-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  border:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--pink-primary);color:#fff;}
.btn-primary:hover{background:var(--pink-dark);transform:translateY(-1px);color:#fff;}
.btn-outline{background:transparent;border:1.5px solid #fff;color:#fff;}
.btn-outline:hover{background:#fff;color:var(--plum);}

/* ===== Hero / intro ===== */
.hero{
  text-align:center;
  padding:48px 20px 24px;
}
.hero h1{
  font-size:2.2rem;
  line-height:1.15;
}
.hero p{
  color:var(--gray-text);
  font-size:1.05rem;
  max-width:560px;
  margin:10px auto 0;
}

/* ===== Search / filter bar ===== */
.search-bar{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  margin:24px auto 36px;
  max-width:900px;
}
.search-bar form{
  display:grid;
  grid-template-columns:repeat(3,1fr) auto;
  gap:12px;
  align-items:end;
}
.search-field label{
  display:block;
  font-size:.75rem;
  font-weight:600;
  color:var(--gray-text);
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:6px;
}
.search-field select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1.5px solid #f0d9e2;
  background:#fff9fb url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23C22C60'><path d='M5 7l5 5 5-5z'/></svg>") no-repeat right 12px center;
  background-size:14px;
  appearance:none;
  font-size:.9rem;
  color:var(--plum);
}
.search-field select:focus{outline:2px solid var(--pink-primary);outline-offset:1px;}
.search-bar .btn-search{
  background:var(--pink-primary);
  color:#fff;
  padding:12px 26px;
  border-radius:10px;
  font-weight:700;
  white-space:nowrap;
}
.search-bar .btn-search:hover{background:var(--pink-dark);}

@media(max-width:720px){
  .search-bar form{grid-template-columns:1fr;}
}

/* ===== Oglasi lista ===== */
.oglasi-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:0 0 40px;
}
.oglas-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;
  gap:18px;
  padding:16px;
  position:relative;
  overflow:hidden;
  transition:transform .15s ease;
}
.oglas-card:hover{transform:translateY(-2px);}
.oglas-thumb{
  width:120px;
  height:120px;
  flex:0 0 120px;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  background:#f5d5e2;
}
.oglas-thumb img{width:100%;height:100%;object-fit:cover;}
.badge-new{
  position:absolute;
  top:8px;
  left:8px;
  background:var(--gold);
  color:#3d2a00;
  font-size:.65rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.03em;
  animation:blink-badge 1.4s ease-in-out infinite;
  z-index:2;
}
@keyframes blink-badge{
  0%,100%{opacity:1;}
  50%{opacity:.35;}
}
.oglas-body{flex:1;min-width:0;}
.oglas-body h3{font-size:1.15rem;margin-bottom:4px;}
.oglas-meta{
  font-size:.8rem;
  color:var(--gray-text);
  margin-bottom:8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.oglas-meta span{
  background:var(--blush);
  padding:3px 10px;
  border-radius:999px;
}
.oglas-excerpt{
  font-size:.88rem;
  color:var(--gray-text);
  margin-bottom:12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.oglas-actions{display:flex;gap:10px;flex-wrap:wrap;}
.oglas-actions .btn{padding:9px 16px;font-size:.82rem;}
.btn-call{
  background:var(--plum);
  color:#fff;
}
.btn-call:hover{background:#2a0f21;color:#fff;}

@media(max-width:600px){
  .oglas-card{flex-direction:column;}
  .oglas-thumb{width:100%;height:180px;flex:none;}
}

/* ===== Single oglas ===== */
.single-oglas{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  margin:30px auto;
  max-width:760px;
}
.single-oglas .oglas-meta{margin-bottom:16px;}
.single-oglas img.wp-post-image{
  border-radius:12px;
  margin-bottom:20px;
}
.single-oglas .oglas-actions{margin-top:24px;}

/* ===== Footer ===== */
.site-footer{
  background:var(--plum);
  color:#e9c9d8;
  padding:36px 0 20px;
  margin-top:40px;
  font-size:.85rem;
}
.site-footer a{color:#f5d5e2;}
.footer-grid{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:16px;
}
.footer-terms{max-width:600px;line-height:1.6;}
.footer-bottom{text-align:center;color:#c79bb0;font-size:.78rem;}

/* ===== Floating buttons ===== */
.floating-actions{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:999;
}
.fab{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  box-shadow:0 6px 20px rgba(61,25,48,.25);
  font-weight:700;
  font-size:.85rem;
  color:#fff;
  animation:fab-pop .3s ease;
}
.fab-chat{background:linear-gradient(135deg,var(--pink-primary),var(--pink-dark));}
.fab-chat:hover{color:#fff;transform:translateY(-2px);}
@keyframes fab-pop{from{opacity:0;transform:scale(.8);}to{opacity:1;transform:scale(1);}}

@media(max-width:500px){
  .fab{padding:10px 14px;font-size:.78rem;}
  .floating-actions{right:12px;bottom:12px;}
}

/* ===== Mobile menu (ako postoji nav) ===== */
.main-nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;justify-content:center;}
.main-nav a{
  color:#fff;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.03em;
  padding:9px 20px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.5);
  transition:background .15s ease, color .15s ease;
}
.main-nav a:hover{background:#fff;color:var(--plum);}
@media(max-width:720px){
  .site-header .container{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  .main-nav{width:100%;}
  .main-nav ul{width:100%;justify-content:center;}
}