/* ===== Base & Variables ===== */
:root{
  --brand:#4c5dc3;
  --brand-dark:#2f3d9b;
  --text:#1a1a1a;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e5e7eb;
  --primary:#4c5dc3;
  --primary-contrast:#ececee;
}

*{box-sizing:border-box}
body{
  font-family:'Roboto',sans-serif;
  font-weight:bold;
  color:var(--text);
  margin:0;
}

/* ===== Navbar ===== */
.bg-color{ background-color:var(--brand); }
.logo{ height:150px!important; width:350px!important; }
.navbar{ box-shadow:0 4px 6px -2px #ececee; }
.navbar img{ height:60px; width:200px; border-radius:10px; }
.navbar .container-fluid{ display:flex; align-items:center; justify-content:space-between; }

.navbar-toggler{ border-color:#fff; padding:.25rem .5rem; background:rgba(255,255,255,.08); border-radius:10px; box-shadow:none!important; }
.navbar-toggler:focus{ box-shadow:none!important; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.styled-nav{
  color:var(--primary-contrast)!important;
  font-size:21px;
  border:2px solid var(--primary-contrast);
  border-radius:10px;
  padding:6px 18px;
  display:inline-block;
  min-width:150px;
  text-align:center;
  transition:all .3s ease-in-out;
}
.styled-nav:hover{
  font-weight:700;
  transform:scale(1.1);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  background:rgba(255,255,255,.1);
  letter-spacing:1.7px;
}
.btn-contact{ border:1px solid var(--primary-contrast)!important; }

/* Mobile navbar */
@media (max-width:991.98px){
  .navbar-brand .logo{ height:56px!important; width:auto!important; }
  .navbar img{ height:auto!important; width:auto!important; }
  .navbar .container-fluid{ gap:.75rem; }
  .navbar-collapse{ padding-top:.5rem; }
  .navbar-nav .nav-item{ margin:.25rem 0; }

  .styled-nav{
    display:block; width:100%; min-width:0;
    font-size:18px; padding:10px 14px; border:1px solid var(--primary-contrast);
    border-radius:12px; text-align:left; transition:none!important; transform:none!important; box-shadow:none!important; letter-spacing:0!important; font-weight:500;
  }
  .styled-nav:hover,.styled-nav:active,.styled-nav:focus{
    background:rgba(255,255,255,.08);
    color:var(--primary-contrast)!important; border-color:var(--primary-contrast);
  }
  .btn-contact{ width:100%; border-radius:12px; padding:10px 14px; }
}

/* ===== HERO (image with overlay, white text) ===== */
.container-fluid.section2{
  position:relative;
  width:100%;
  min-height:70vh;
  background-image:url("../images/Auto pozadina.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.container-fluid.section2::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25));
}
.container-fluid.section2 > .container{ position:relative; z-index:1; }
.hero-content{ color:#fff; }
.hero-content h2,.hero-content p,.hero-content strong{ color:#fff; }

/* ===== Listings Head (blue text + reveal) ===== */
.listings-head{ line-height:1.2; }
.brand-title{
  color:var(--brand);
  font-weight:800; letter-spacing:.2px; position:relative; display:inline-block;
}
.brand-title::after{
  content:""; display:block; width:0; height:3px; background:var(--brand);
  margin:.5rem auto 0; border-radius:2px; transition:width .6s ease;
}
.brand-sub{
  color:var(--brand); max-width:56ch; margin-left:auto; margin-right:auto; opacity:.95;
}
.reveal{ opacity:0; transform:translateY(12px) scale(.98); will-change:transform,opacity; }
.reveal.is-visible{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible .brand-title::after{ width:96px; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  .brand-title::after{ transition:none; width:96px; }
}

/* ===== Service text + primary button ===== */
.service-title,.service-text,.service-cta{ color:var(--brand); }
.service-cta strong{ color:var(--brand-dark); }
.btn-primary{
  background:var(--primary); border-color:var(--primary); color:var(--primary-contrast);
  box-shadow:none; transition:none;
}
.btn-primary:hover,.btn-primary:focus{ background:var(--primary); border-color:var(--primary); color:var(--primary-contrast); }

/* ===== Posts (cards) ===== */
#ad-container .row{ justify-content:center; }

.ad-card{
  display:flex; flex-direction:column; height:100%;
  background:var(--card); border-radius:14px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease; cursor:pointer;
}
.ad-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.ad-img{ display:block; width:100%; aspect-ratio:4/4; object-fit:cover; object-position:center; }
.ad-card img{ max-width:100%; height:auto; }

.ad-body{ padding:14px 16px; }
.ad-title{ font-size:1rem; font-weight:700; margin:0 0 4px; color:#111827; }
.ad-price{ color:#003d80; font-weight:800; margin-bottom:4px; }
.ad-meta{ color:var(--muted); font-size:.9rem; margin-bottom:6px; }
.ad-desc{ color:#4b5563; font-size:.92rem; margin:0 0 10px; }
.ad-btn{
  align-self:flex-start; font-size:.875rem; padding:6px 14px; border-radius:20px;
  background-color:#003d80; border:none; color:var(--primary-contrast);
}
.ad-btn:hover{ background-color:#002d63; }

/* ===== Modal (smaller carousel images) ===== */
.modal-content{ border-radius:14px; overflow:hidden; }
.modal-body{ padding:1rem 2rem; }

.modal-dialog.modal-xl{ max-width:70%; }             /* desktop default */
.carousel-item img{
  max-height:60vh; object-fit:contain; background:#0b1324; border-radius:10px;
}

.ad-desc { line-height: 1.5; }


/* Desktop only enforce 70% */
@media (min-width:992px){
  .modal-dialog.modal-xl{ max-width:70%; }
}

/* Phones */
@media (max-width:575.98px){
  #postModal .modal-dialog{ max-width:100%!important; margin:.5rem!important; }
  #postModal .modal-header,#postModal .modal-footer{ padding:.75rem 1rem; }
  #postModal .modal-title{ font-size:1rem; font-weight:700; }
  #postModal .btn-close{ transform:scale(1.1); }
  #postModal .modal-body{ padding:.75rem 1rem; max-height:75vh; overflow:auto; }
  #postModal .carousel{ border-radius:10px; overflow:hidden; }
  #postModal .carousel-item img{ width:100%; height:auto; max-height:40vh; object-fit:contain; background:#0b1324; border-radius:10px; }
  #postModal .carousel-control-prev, #postModal .carousel-control-next{ width:14%; }
  #postModal .carousel-indicators{ position:static; margin-top:.5rem; }
  #postModal .carousel-indicators [data-bs-target]{ width:8px; height:8px; border-radius:50%; background:#ececee; }
  #postModal .carousel-indicators .active{ background:var(--brand); }
  #postModal #modalMeta{ font-size:.9rem; }
  #postModal #modalDesc{ font-size:.95rem; line-height:1.45; }
  #postModal .modal-footer .btn{ width:100%; background:var(--brand); border-color:var(--brand); color:var(--primary-contrast); }
}

/* Tablets up to md/lg */
@media (min-width:576px) and (max-width:991.98px){
  #postModal .modal-dialog{ max-width:90%!important; }
  #postModal .carousel-item img{ max-height:50vh; }
}

/* ===== Footer ===== */
.footer{
  background-color:var(--brand);
  color:var(--primary-contrast);
  font-family:'Roboto',sans-serif;
}
.footer-title{ font-size:1.2rem; font-weight:700; margin-bottom:15px; }
.footer-link{ color:var(--primary-contrast); text-decoration:none; transition:color .3s; }
.footer p,.footer li{ font-size:1.3rem; line-height:1.6; }
.footer-logo{ height:150px; width:300px; border-radius:10px; }

@media (max-width:991.98px){
  footer.footer{ border-top:1px solid #ececee; padding-top:1rem; }
  footer.footer .container{ margin-top:1.5rem!important; }
  footer.footer .row > [class*="col-"]{ text-align:center; margin-bottom:.75rem; }
  footer.footer .footer-logo img, footer.footer img.footer-logo{ height:56px; width:auto; border-radius:10px; }
  footer.footer .footer-title{ color:var(--brand); margin-bottom:.25rem; font-weight:700; }
  footer.footer .footer-link{ color: #ececee; }
  footer.footer .footer-link:hover{ text-decoration:underline; }
  footer.footer p{ margin-bottom:.25rem; }
  footer.footer .text-center small{ display:inline-block; margin-top:.5rem; }
}