/* =========================
   THEME TOKENS
========================= */
:root{
  --orange:#ff6a00;
  --black:#0a0a0a;
  --dark:#121212;
  --card:#171a1f;
  --text:#ffffff;
}

*,
*::before,
*::after{ box-sizing:border-box; }

/* Хинт до пребарувачите дека темата е dark */
:root, html, body { color-scheme: dark; }

/* =========================
   BASE + TYPOGRAPHY
========================= */
html, body{ height:100%; }
body{
  background:var(--black);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* СЕКАДЕ ТЕКСТ = БЕЛО (освен копчиња и inputs) */
body, h1,h2,h3,h4,h5,h6,
p, span, small, label, .form-label,
.navbar .navbar-brand, .navbar .nav-link,
.card-title, .list-group-item, li, dt, dd{
  color:#ffffff !important;
}

a{ color:var(--orange); text-decoration:none; }
a:hover{ color:#ffa366; }

/* =========================
   NAV / HEADER
========================= */
.navbar{ background:var(--dark) !important; }
.bg-black{ background:#000 !important; }

.main-nav{ min-height:56px; border-bottom:1px solid rgba(255,255,255,.06); }
.main-nav .nav-link{
  letter-spacing:.04em;
  color:#fff !important;
  opacity:.95;
}
.main-nav .nav-link:hover{ opacity:1; }

/* =========================
   BUTTONS
========================= */
.btn-orange{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}
.btn-orange:hover{ opacity:.9; color:#fff; }

.btn-outline-orange{
  color:var(--orange);
  border-color:var(--orange);
  background:transparent;
}
.btn-outline-orange:hover{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
}

/* Не форсирај бело внатре во копчиња */
.btn, .btn *{ color:inherit !important; }

/* =========================
   CARDS / ALERTS / TABLES
========================= */
.card{ background:var(--card); border-color:#222; }
.alert{ background:#141414; border-color:#333; color:#ddd; }
.table{ color:#e9ecef; }
.price{ color:var(--orange); }
.border-orange{ border-color:var(--orange) !important; }
.text-orange{ color:var(--orange) !important; }

/* Активен елемент во листи (sidebar категории) */
.list-group-item.active{
  background:var(--orange) !important;
  border-color:var(--orange) !important;
  color:#fff !important;
}

/* =========================
   FORMS — ТЕМНИ, БЕЛ ТЕКСТ
========================= */
/* БАЗА: секогаш темна позадина + бел текст */
input, select, textarea,
.form-control, .form-select {
  background:#0f0f0f !important;
  color:#ffffff !important;
  border:1px solid #333 !important;
  caret-color:#ffffff;
}

/* ФОКУС: останува темно, портокалов акцент */
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  background:#141414 !important;
  color:#ffffff !important;
  border-color:var(--orange) !important;
  box-shadow:0 0 0 .2rem rgba(255,106,0,.20) !important;
  outline:0 !important;
  caret-color:#ffffff;
}

/* Placeholder да е сив, читлив */
::placeholder { color:#bdbdbd; opacity:1; }
.form-control::placeholder, textarea::placeholder { color:#bdbdbd; opacity:1; }

/* Input group addon */
.input-group-text{
  background:#0f0f0f !important;
  color:#e6e6e6 !important;
  border-color:#333 !important;
}

/* Select темен + стрелка */
.form-select{
  background-color:#0f0f0f !important;
  background-image:var(--bs-form-select-bg-img);
  color:#ffffff !important;
}

/* Checkbox / Radio акцент */
.form-check-input{
  background-color:#0f0f0f;
  border-color:#555;
}
.form-check-input:focus{
  border-color:var(--orange) !important;
  box-shadow:0 0 0 .2rem rgba(255,106,0,.25) !important;
}
.form-check-input:checked{
  background-color:var(--orange) !important;
  border-color:var(--orange) !important;
}

/* Disabled/readonly да останат темни и читливи */
input[disabled], select[disabled], textarea[disabled],
.form-control[disabled], .form-select[disabled],
input[readonly], textarea[readonly]{
  background:#121212 !important;
  color:#bdbdbd !important;
  opacity:1 !important;
}

/* type=number и range */
input[type="number"], input[type="range"]{
  background:#0f0f0f !important;
  color:#ffffff !important;
}

/* Chrome/Edge/Safari автопополнување (жолтото) -> темно + бел текст */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#ffffff !important;
  caret-color:#ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
  /* темна внатрешна сенка како позадина */
  box-shadow: inset 0 0 0 1000px #0f0f0f !important;
}
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus{
  -webkit-text-fill-color:#ffffff !important;
  box-shadow: inset 0 0 0 1000px #141414 !important,
              0 0 0 .2rem rgba(255,106,0,.20) !important;
  border-color:var(--orange) !important;
}

/* iOS Safari background на inputs */
input, textarea, select{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
}

/* =========================
   HERO SLIDER (HOME)
========================= */
.hero-slider .carousel-item > img{
  width:100%;
  height:72vh;
  object-fit:cover;
  object-position:center;
}
.hero-caption{ max-width:720px; }
.hero-caption h1{
  font-size:clamp(2rem,6vw,5rem);
  line-height:1.05;
  font-weight:800;
}
.hero-arrow{
  width:48px; height:48px;
  border:2px solid #fff;
  border-radius:50%;
}

/* =========================
   SIDEBAR FILTER (DESIGN PAGE)
========================= */
.filter-sidebar{
  position:sticky; top:84px;
  background:var(--card);
  border:1px solid #222;
  border-radius:.5rem;
  padding:1rem;
}

/* =========================
   MISC / UTILITIES
========================= */
hr{ border-color:#333; }
.badge{ background:rgba(255,255,255,.08); color:#fff; }

/* За секој случај, одоздола го фиксираме текстот на inputs */
input, select, textarea{ color:#ffffff !important; }


/* Admin sidebar */
.admin-sidebar{
  background: var(--card);
  border:1px solid #222;
  border-radius:.5rem;
  position: sticky; top: 84px;
}
.admin-sidebar .nav-link{
  color:#ddd !important;
  padding:.5rem .75rem;
  border-radius:.4rem;
}
.admin-sidebar .nav-link:hover{
  background: rgba(255,255,255,.06);
  color:#fff !important;
}
.admin-sidebar .nav-link.active{
  background: var(--orange) !important;
  color:#fff !important;
}