:root{
  --radius: 18px;
  --bg: #070a12;
  --surface: rgba(17, 24, 39, .72);
  --surface-2: rgba(15, 23, 42, .78);
  --border: rgba(255,255,255,.08);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.70);
  --shadow: 0 14px 40px rgba(0,0,0,.45);
}

/* Make native selects readable in dark mode (Chrome/Edge) */
:root{ color-scheme: dark; }

/* Apply to ANY <select> even if it doesn't have .form-select */
select{
  color-scheme: dark;
  background: #0b1220;
  color: var(--text);
}
select option{
  background: #0b1220;
  color: var(--text);
}

.form-select{
  color-scheme: dark;
  appearance: none;
}

.form-select option{
  background: #0b1220;
  color: var(--text);
}

/* Dropdown menus (Bootstrap) */
.dropdown-menu{
  background: rgba(8,12,22,.92);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dropdown-item{
  color: var(--text);
}
.dropdown-item:hover, .dropdown-item:focus{
  background: rgba(47,111,237,.16);
  color: var(--text);
}

html, body{
  height: 100%;
}

body{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(47,111,237,.25) 0%, rgba(7,10,18,0) 55%),
    radial-gradient(900px 520px at 90% 10%, rgba(236,72,153,.12) 0%, rgba(7,10,18,0) 60%),
    var(--bg);
  color: var(--text);
}

a{
  color: var(--bs-primary);
}
a:hover{
  opacity: .9;
}

.topbar{
  background: rgba(0,0,0,.28);
  border-bottom: 1px solid var(--border);
}
.topbar-link{
  color: var(--text);
  text-decoration: none;
}
.topbar-link:hover{ text-decoration: underline; }

.nav-glass{
  background: rgba(15, 23, 42, .62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border) !important;
}
.navbar .nav-link{
  color: rgba(229,231,235,.82) !important;
  border-radius: 12px;
  padding: .45rem .75rem;
}
.navbar .nav-link:hover{
  background: rgba(255,255,255,.06);
}
.navbar-brand{
  letter-spacing: .2px;
}
.brand-logo{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}


.hero-logo{
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
@media (max-width: 576px){
  .hero-logo{ width:56px; height:56px; }
}
.hero{
  position: relative;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(47,111,237,.20) 0%, rgba(0,0,0,0) 45%),
    radial-gradient(900px 500px at 25% 30%, rgba(47,111,237,.18) 0%, rgba(0,0,0,0) 60%),
    rgba(15, 23, 42, .30);
}

.card{
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.card .text-muted{ color: var(--muted) !important; }

.shadow-soft{
  box-shadow: var(--shadow);
}

.btn, .form-control, .form-select{
  border-radius: 14px;
}

.btn-primary{
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);

  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  filter: brightness(.85);
}

.form-control, .form-select{
  background: rgba(0,0,0,.20);
  border: 1px solid var(--border);
  color: var(--text);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(213, 220, 235, 0.55);
  box-shadow: 0 0 0 .25rem rgba(192, 203, 225, 0.15);
  background: rgba(0,0,0,.24);
  color: var(--text);
}

.form-control::placeholder{
  color: rgba(229,231,235,.45);
}

.badge-soft{
  background: rgba(255,255,255,.06);
  color: rgba(229,231,235,.90);
  border: 1px solid var(--border);
  padding: .4rem .55rem;
  border-radius: 999px;
}

.car-card-img{
  aspect-ratio: 16/10;
  width: 100%;
  object-fit: cover;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  filter: saturate(1.05) contrast(1.02);
}

.card-hover{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-hover:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
}

.price{
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .2px;
}

hr, .border-top, .border-bottom{
  border-color: var(--border) !important;
}

.table{
  color: var(--text);
}
.table>:not(caption)>*>*{
  background: transparent !important;
  border-color: var(--border) !important;
}

.alert{
  border-radius: 16px;
  border: 1px solid var(--border);
}

.footer-dark{
  background: rgba(0,0,0,.10);
}

#carCarousel .carousel-item{
  transition: transform .25s ease-in-out !important;
  will-change: transform;
}

.gallery-thumbs{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.gallery-thumbs a{
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.20);
  transition: transform .12s ease, border-color .12s ease;
}
.gallery-thumbs a:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
}
.gallery-thumbs img{
  width: 100%;
  height: 64px;
  object-fit: cover;
  display: block;
}

@media (max-width: 992px){
  .gallery-thumbs{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 576px){
  .gallery-thumbs{ grid-template-columns: repeat(3, 1fr); }
}


/* Modern nav link hover */
.navbar .nav-link{
  position: relative;
  padding: .55rem .75rem;
  border-radius: 12px;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.navbar .nav-link:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:12pxpx;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:2px;
  background: linear-gradient(90deg, rgba(47,111,237,0), rgba(47,111,237,.9), rgba(47,111,237,0));
  opacity:0;
  transform: scaleX(.6);
  transition: opacity .15s ease, transform .15s ease;
}
.navbar .nav-link:hover::after{
  opacity:1;
  transform: scaleX(1);
}

@media (max-width: 420px){

  /* NAVBAR: smaller only on phone */
  nav.navbar{
    --bs-navbar-padding-y: .25rem;
  }
  .navbar-brand{
    font-size: 1.05rem;
  }
  .brand-logo{
    width: 28px;
    height: 28px;
  }
  .navbar-toggler{
    padding: .25rem .45rem;
  }
  .navbar-toggler-icon{
    width: 1.2em;
    height: 1.2em;
  }

@media (max-width: 420px){

  /* НЕ менуваме container padding -> ќе си остане “до крај” како порано */

  /* ДВЕТЕ КУТИИ: само внатрешно ги стегаме */
  #heroBox .card-body{ 
    padding: 12px !important; 
  }
  #quickBox .card-body{ 
    padding: 10px 12px !important; 
  }

  /* HERO: помал badge, лого, наслов, текст */
  #heroBox .badge{
    font-size: .56rem !important;
    padding: .22rem .45rem !important;
    border-radius: 999px !important;
  }

  #heroBox .hero-logo{
    width: 34px !important;
    height: 34px !important;
  }

  #heroBox .display-6{
    font-size: 1.10rem !important;
    line-height: 1.1 !important;
  }

  #heroBox p{
    font-size: .78rem !important;
    margin-bottom: .6rem !important;
  }

  /* копчиња помали */
  #heroBox .btn{
    font-size: .82rem !important;
    padding: .40rem .60rem !important;
  }

  /* QUICK FILTER: помал наслов + select + tip */
  #quickBox h5{
    font-size: .90rem !important;
    margin-bottom: .45rem !important;
  }

  #quickBox .form-select{
    font-size: .82rem !important;
    padding: .38rem .55rem !important;
  }

  #quickBox .btn{
    font-size: .82rem !important;
    padding: .45rem .65rem !important;
  }

  #quickBox .small,
  #quickBox .text-muted{
    font-size: .74rem !important;
  }

  /* помал spacing меѓу двете колони (на мобилен се stack-ираат) */
  .hero .row.g-3{ 
    --bs-gutter-y: .65rem; 
  }
}
}