/*
Theme Name: Skakalo Child
Template: listinghive
Text Domain: skakalo
Version: 1.1.0
Description: Child tema za oglasnik Skakalo.com (ListingHive). Moderan, profesionalan dizajn u žabljim bojama.
Author: Skakalo
*/

:root{
  --frog-900:#0b3812;
  --frog-700:#156a1f;
  --frog-500:#1fbf31;
  --frog-300:#8be68f;
  --frog-100:#eaf9ec;
  --frog-yellow:#c2eb2f;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;
  background:#fff;
  color:#111;
}

a{color:var(--frog-700)}
a:hover{color:var(--frog-500)}

/* Header */
.sk-header{
  border-bottom:1px solid #eee;
  background:linear-gradient(0deg,#fff,#f8fff9);
}

.sk-topbar{
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between;
  padding:14px 24px;
  max-width:1200px;
  margin:0 auto;
}

.sk-logo img{
  display:block;
  height:var(--sk-logo-height,56px);
}

.sk-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.sk-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:10px;
  padding:10px 14px;
  border:1px solid var(--frog-300);
  background:#fff;
  cursor:pointer;
}

.sk-btn--primary{
  background:var(--frog-500);
  color:#fff;
  border-color:var(--frog-500);
}

.sk-btn--primary:hover{
  filter:saturate(1.1) brightness(.98);
}

/* User */
.sk-user{
  position:relative;
}

.sk-user > button{
  border:none;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
}

.sk-user-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:220px;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  display:none;
}

.sk-user:hover .sk-user-menu{
  display:block;
}

.sk-user-menu a{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
}

.sk-user-menu a:hover{
  background:#f7fff8;
}

/* Hero search */
.sk-hero{
  background:linear-gradient(180deg,var(--frog-100),#fff);
  padding:32px 0;
  border-bottom:1px solid #eee;
}

.sk-hero .wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.sk-search{
  display:grid;
  grid-template-columns:2fr 1fr 1fr auto;
  gap:12px;
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  padding:12px;
}

.sk-search input,
.sk-search select{
  padding:12px;
  border:1px solid #e8e8e8;
  border-radius:10px;
}

/* Cards */
.sk-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

@media (max-width:1024px){
  .sk-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:768px){
  .sk-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:520px){
  .sk-grid{
    grid-template-columns:1fr;
  }
}

.sk-card{
  border:1px solid #eee;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
  position:relative;
}

.sk-card img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.sk-card .body{
  padding:12px;
}

.sk-price{
  color:var(--frog-700);
  font-weight:700;
}

.sk-badge{
  display:inline-block;
  background:var(--frog-yellow);
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
}

/* Premium */
.sk-premium{
  position:absolute;
  left:10px;
  top:10px;
  background:linear-gradient(45deg,#ffe27a,#ffd24d);
  color:#000;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

.sk-card.premium{
  box-shadow:0 12px 30px rgba(31,191,49,0.15);
}

/* Carousel */
.sk-carousel{
  position:relative;
}

.sk-carousel .track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:8px;
}

.sk-carousel .track img{
  flex:0 0 auto;
  width:100%;
  max-width:320px;
  height:220px;
  object-fit:cover;
  border-radius:12px;
  scroll-snap-align:center;
}

.sk-carousel .nav{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}

.sk-carousel button{
  pointer-events:auto;
  border:none;
  background:rgba(255,255,255,.85);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
}

/* Drag & drop uploader */
.sk-drop{
  border:2px dashed var(--frog-300);
  border-radius:12px;
  padding:16px;
  text-align:center;
  background:#fafefb;
}

.sk-drop.dragover{
  background:#f1fff3;
}

.sk-previews{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.sk-previews .item{
  position:relative;
}

.sk-previews img{
  width:110px;
  height:80px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #eaeaea;
}

.sk-previews .tools{
  position:absolute;
  bottom:6px;
  left:6px;
  display:flex;
  gap:6px;
}

.sk-previews .tools button{
  font-size:12px;
  padding:4px 6px;
  border-radius:6px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
}

/* Layout & boje */
#site-footer{
  background:#000;
  color:#fff;
  padding:48px 0 24px;
}

.footer-container{
  width:min(1200px, 92%);
  margin:0 auto;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
}

.footer-title{
  color:#fff;
  margin:0 0 12px;
  font-size:1.05rem;
}

.footer-desc{
  margin:0 0 12px;
  color:#e5e5e5;
}

.footer-list,
.footer-legal-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-list a,
.footer-legal-list a{
  color:#f5f5f5;
  text-decoration:none;
}

.footer-list a:hover,
.footer-legal-list a:hover{
  text-decoration:underline;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:28px;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:16px;
}

.footer-logo img{
  display:block;
}

.footer-logo.grayscale img{
  filter:grayscale(100%);
}

.footer-meta{
  display:flex;
  gap:12px;
  align-items:center;
  color:#d4d4d4;
}

.site-name{
  color:#fff;
  font-weight:600;
  text-decoration:none;
}

@media (max-width: 900px){
  .footer-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 560px){
  .footer-grid{
    grid-template-columns:1fr;
  }
}

/* ==================================================
   FIX: ListingHive kategorije (desktop + add listing)
   Moderniji izgled + veće ikone
   ================================================== */

.lh-categories{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:20px;
}

.lh-categories__item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center;
  text-align:center;
  background:#fff;
  border:1px solid #edf3ee;
  border-radius:22px;
  padding:22px 16px;
  min-height:210px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 8px 24px rgba(11,56,18,.04);
}

.lh-categories__item:hover{
  transform:translateY(-6px);
  border-color:rgba(31,191,49,.28);
  box-shadow:0 16px 36px rgba(31,191,49,.14);
}

.lh-categories__image{
  margin:0 0 14px 0 !important;
  width:140px !important;
  height:140px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #f6fff7 0%, #edf9ef 100%);
  border:1px solid rgba(31,191,49,.12);
  border-radius:50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(21,106,31,.06);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.lh-categories__item:hover .lh-categories__image{
  transform:scale(1.04);
  border-color:rgba(31,191,49,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 16px 30px rgba(21,106,31,.10);
}

.lh-categories__image img{
  width:118px !important;
  height:118px !important;
  max-width:118px !important;
  max-height:118px !important;
  object-fit:contain !important;
  display:block;
  transition:transform .2s ease;
}

.lh-categories__item:hover .lh-categories__image img{
  transform:scale(1.08);
}

.lh-categories__name{
  font-weight:700;
  font-size:15px;
  line-height:1.25;
  color:#111;
  max-width:140px;
}

@media (min-width: 1024px){
  .lh-categories__item{
    flex-direction:column !important;
  }

  .lh-categories__image{
    margin-left:0 !important;
  }
}

@media (max-width: 768px){
  .lh-categories{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
  }

  .lh-categories__item{
    min-height:190px;
    padding:18px 12px;
    border-radius:18px;
  }

  .lh-categories__image{
    width:120px !important;
    height:120px !important;
  }

  .lh-categories__image img{
    width:100px !important;
    height:100px !important;
    max-width:100px !important;
    max-height:100px !important;
  }
}

@media (max-width: 520px){
  .lh-categories{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }

  .lh-categories__item{
    min-height:175px;
    padding:16px 10px;
  }

  .lh-categories__image{
    width:108px !important;
    height:108px !important;
    margin-bottom:12px !important;
  }

  .lh-categories__image img{
    width:90px !important;
    height:90px !important;
    max-width:90px !important;
    max-height:90px !important;
  }

  .lh-categories__name{
    font-size:14px;
    max-width:120px;
  }
}

/* Smanji visinu hero slidera */
.sk-hero [class*="slider"],
.sk-hero [class*="swiper"],
.sk-hero [class*="slick"],
.sk-hero .sk-carousel{
  height:30px !important;
  max-height:300px !important;
  overflow:hidden;
}

.sk-hero [class*="slider"] img,
.sk-hero [class*="swiper"] img,
.sk-hero [class*="slick"] img{
  height:30px !important;
  object-fit:cover;
}

/* ==================================================
   OVERRIDE: Hero tekst da bude žut
   ================================================== */

section.sk-hero,
section.sk-hero *{
  color:#ffff11 !important;
}

section.sk-hero p{
  opacity:1 !important;
}

section.sk-hero input,
section.sk-hero select{
  color:#ffffff !important;
  background:rgba(0,0,0,0.18) !important;
  border:1px solid rgba(255,255,255,0.55) !important;
}

section.sk-hero input::placeholder{
  color:rgba(255,255,255,0.9) !important;
  opacity:1 !important;
}

section.sk-hero select option{
  color:#111 !important;
}

section.sk-hero button{
  color:#ffffff !important;
}