/* Moved from inline <style> in index.html */

.detail-content { animation: fadeIn 0.5s; }

@keyframes fadeIn {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: translateY(0); }

}



@media (max-width: 767px) {

  .btn-submit-custom { font-size: 0.8rem; padding: 10px 5px; }

}



.custom-arrows li::marker { color: #ff0000; font-size: 1.5em; }

ul li { padding-left: 10px; }



.hover-red { font-size: 2rem; font-weight: 700; transition: color 0.3s ease; }

.hover-red:hover { color: #ff0000 !important; transition: 0.3s; }



.btn-submit-custom { background-color: #333333; color: #ffffff; border: 1px solid #444444; transition: all 0.3s ease; padding: 0.5rem 2rem !important; }

.btn-submit-custom:hover { background-color: #b30000; border-color: #ff0000; color: #ffffff; box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); }

.btn-submit-custom:active { background-color: #800000; transform: scale(0.98); }



.form-control:focus { background-color: #1a1a1a; color: #fff; border-color: #198754; box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); }

.form-control::placeholder { color: #6c757d; }



body { background-color: #121212; color: #ffffff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; min-height: 100vh; display: flex; flex-direction: column; position: relative; padding-top: 72px; }

.bg-cyber-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../images/pozadi.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.4; z-index: -1; pointer-events: none; }



header { border-bottom: 10px solid #333333; padding: 0.5rem 1rem; background-color: rgba(18, 18, 18, 0.9); position: fixed; top: 0; left: 0; right: 0; z-index: 1030; }

.btn { padding: 1rem 2rem; }

.separator { border-top: 1px solid #444444; margin: 2rem 0; }



footer { border-top: 1px solid #333333; padding: 0.75rem 1rem; margin-top: auto; background-color: rgba(18, 18, 18, 0.9); font-size: 0.9rem; display: flex; align-items: center; }

footer > :last-child { margin-left: auto; text-align: right; }



.big-childs li { font-size: 1.2rem; margin-bottom: 10px; }

.offcanvas, .offcanvas-backdrop { transition: none !important; }



.napiste-nam-form { width: 100%; }

.napiste-nam-form > * { width: 100%; }



.main-centered { margin: 0 auto; max-width: 70vw; width: 100%; }



/* Mobile: widen the centered container */

@media (max-width: 767px) {

  .main-centered { max-width: 90vw; }

}



section[id] { scroll-margin-top: 80px; }

/* Navbar toggler styling to match buttons */

.navbar-dark .navbar-toggler {

  background-color: #333333; /* same as .btn-submit-custom */

  border: 1px solid #444444;

}

.navbar-dark .navbar-toggler .navbar-toggler-icon {

  background-image: none; /* remove default icon */

  width: 1.5rem; height: 1.5rem; position: relative; display: inline-block;

}

.navbar-dark .navbar-toggler .navbar-toggler-icon::before,

.navbar-dark .navbar-toggler .navbar-toggler-icon::after,

.navbar-dark .navbar-toggler .navbar-toggler-icon span {

  content: ""; position: absolute; left: 0; right: 0; height: 2px; background-color: #ffffff; border-radius: 1px;

}

.navbar-dark .navbar-toggler .navbar-toggler-icon span { top: 50%; transform: translateY(-50%); }

.navbar-dark .navbar-toggler .navbar-toggler-icon::before { top: 4px; }

.navbar-dark .navbar-toggler .navbar-toggler-icon::after { bottom: 4px; }



/* Ensure there is a middle bar */

.navbar-dark .navbar-toggler .navbar-toggler-icon { display: inline-block; position: relative; }

/* Offcanvas hover open aid: visible pointer */

.navbar-dark .navbar-toggler:hover { background-color: #333333; border-color: #444444; }

/* Cookie banner */

.cookie-banner {

  position: fixed;

  left: 50%;

  bottom: 1rem;

  transform: translateX(-50%);

  width: 100%;

  max-width: 720px;

  background-color: rgba(18, 18, 18, 0.95);

  color: #ffffff;

  border: 1px solid #444444;

  border-radius: 10px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.4);

  padding: 1rem 1rem;

  display: none; /* shown via JS */

  z-index: 1090; /* above offcanvas/backdrop */

}

.cookie-banner .content { display: flex; gap: 1rem; align-items: center; }

.cookie-banner .text { flex: 1 1 auto; font-size: 0.95rem; }

.cookie-banner .actions { flex: 0 0 auto; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

.cookie-banner .link-policy { color: #9ec5fe; text-decoration: none; }

.cookie-banner .link-policy:hover { text-decoration: underline; }

/* New: fullscreen backdrop to block clicks while cookie choice is pending */

.cookie-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.35); /* lighter grey smoke */

  backdrop-filter: blur(1px);

  -webkit-backdrop-filter: blur(1px);

  z-index: 1080; /* below banner, above UI */

  display: none; /* toggled via JS */

  pointer-events: auto; /* capture clicks */

}



@media (max-width: 576px) {

  .cookie-banner { max-width: 90vw; padding: 0.75rem; }

  .cookie-banner .content { flex-direction: column; align-items: stretch; gap: 0.75rem; }

  .cookie-banner .actions { justify-content: stretch; }

}



#cookieInfoModal {

	z-index: 1060;

}