/* =========================
   BASE / GLOBAL
   ========================= */
html, body > main { background-color: white; }

/* CTAs (keep exact colors) */
body > main > div.container-content > div > div > div > div.col-12.col-sm-11.col-md-6.col-lg-6.sica-first > form > button {
  background-color:#230078 !important;
}
body > main > div.container-content > div > div > div > div.col-12.col-sm-11.col-md-6.col-lg-6.sica-second > a {
  background-color:#fa7800; color:white;
}

/* =========================
   LEVIDEO / OFFCANVAS RIGHT
   ========================= */
.booklet_offcanvas_image_shape_wrapper.image_shape_1,
.booklet_offcanvas_image_shape_wrapper.image_shape_2,
.booklet_offcanvas_image_shape_wrapper.image_shape_3,
.booklet_offcanvas_image_shape_wrapper.image_shape_4 { filter:none !important; }

#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(1) > div.col-9 > div:nth-child(2) > div:nth-child(1) { background-color:white !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(2) > div:nth-child(3) { background-color:#73a300 !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(1) > div.col-9 > div:nth-child(1) > div:nth-child(3) { background-color:#999999 !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(3) > div:nth-child(1) { background-color:#999999 !important; }

.booklet_offcanvas_image_shape_wrapper.image_shape_1 { background-color:#73a300 !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(1) > div.col-9 > div:nth-child(2) > div.col-4.booklet_offcanvas_image_shape_wrapper.image_shape_2 { background-color:white !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(3) > div.col-6.booklet_offcanvas_image_shape_wrapper.image_shape_4 { background-color:white !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(2) > div.col-3.booklet_offcanvas_image_shape_wrapper.image_shape_3 { background-color:#73a300 !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(3) > div.col-3.booklet_offcanvas_text_shape_wrapper { background-color:#73a300 !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(2) > div.col-3.booklet_offcanvas_text_shape_wrapper { background-color:#999999 !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(1) > div.col-9 > div:nth-child(2) > div.col-4.booklet_offcanvas_text_shape_wrapper { background-color:#999999 !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(2) > div:nth-child(2) { background-color:white !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_right_column > div > div:nth-child(1) > div.col-3 { background-color:white !important; }

/* =========================
   OFFCANVAS LEFT / DESNI
   ========================= */
body, .offcanvas-body { background-color:white !important; }
#offcanvasIntro > div > div { background-color:#230078 !important; color:white; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_left_column > div > div.left_column_upper_content > div > h2 { color:#999999; }
#close-intro { background-color:#fa7800; color:#fff !important; }
#offcanvasIntro > div > div > div > div.col-12.col-md-6.booklet_offcanvas_left_column > div > div.left_column_upper_content > div > h1 { color:white; }
#offcanvasIntro > div > div > div { background-color:#230078 !important; }

/* =========================
   TIMELINE / CONTENT
   ========================= */
.timeline-row .timeline-content-text {
  display:block !important;
  text-overflow:unset !important;
  -webkit-box-orient:unset !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
}
.action-inner-wraper { background-color: rgba(255,255,255,0.6); }

/* Offcanvas bottom height */
#offcanvasForm.offcanvas.offcanvas-bottom { height:55vh !important; }

/* Hide some UI bits */
#toggleNavigationOffcanvas, .action-inner-wraper, .navigation-indicator-t, #NexiosChat, .page-header { display:none !important; }

/* =========================
   MEDIA / VIDEO
   ========================= */
@media screen and (min-width:1024px){
  body.vl-body.vl-32 .virtual-location-container video,
  body.vl-body.vl-33 .virtual-location-container video,
  body.vl-body.vl-34 .virtual-location-container video,
  body.vl-body.vl-35 .virtual-location-container video,
  body.vl-body.vl-36 .virtual-location-container video,
  body.vl-body.vl-37 .virtual-location-container video,
  body.vl-body.vl-38 .virtual-location-container video,
  body.vl-body.vl-39 .virtual-location-container video { height:100vh !important; }
}

/* =========================
   MODALS / FORMS
   ========================= */
.field-label { font-size:1.5rem !important; }

.modal-header {
  background-color:#5563ca; color:#fff; padding:20px;
  border-top-left-radius:6px; border-top-right-radius:6px;
  display:flex; justify-content:space-between; align-items:center;
}
.modal-title { font-size:1.5rem; font-weight:bold; margin:0; }
.btn-close { color:#fff; opacity:.8; }
.btn-close:hover { opacity:1; }

.modal-body {
  background-color:#f9f9f9; padding:30px;
  font-family:'Arial', sans-serif; font-size:1rem; line-height:1.6;
  border-bottom-left-radius:6px; border-bottom-right-radius:6px;
}

.container-content {
  padding:15px 20px; background-color:#fff; border-radius:6px;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}

/* Blink indicator */
.blinking-circle {
  width:10px; height:10px; background-color:#220062; border-radius:50%;
  animation:blink 1.5s infinite;
}
@keyframes blink { 50%{opacity:0;} }

/* Form radios */
.form-group { display:flex; flex-direction:column; }
.form-check { margin-bottom:10px; display:flex; align-items:center; }
.form-check-input { margin-right:8px; }

/* Audio toggle */
.toggle-audio{
  position:relative; background-color:#220062; border-radius:50%;
  width:50px; height:50px; border:none; color:white;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.toggle-audio::before{
  content:"Pusti zvuk"; font-size:12px; color:#fff;
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  white-space:nowrap;
}

/* Home – no scroll */
body.home { overflow:hidden; height:100%; margin:0; }

/* Fullscreen bg video */
.virtual-location-container-backround { position:relative; width:100vw; height:100vh; overflow:hidden; }
.virtual-location-container-backround video {
  width:100vw; height:100vh; object-fit:cover; position:absolute; top:0; left:0;
}

/* =========================
   INTRO CHAPTER
   ========================= */
.intro_chapter_image_wrapper { border:1px solid #ddd; border-radius:.25rem; padding:1rem; text-align:center; margin-bottom:1.25rem; }
.intro_chapter_image { max-height:380px; }
.booklet_intro_chapter_title { font-size:2rem; font-weight:bold; margin-bottom:1.25rem; font-family:'Poppins', sans-serif; }
.booklet_intro_chapter_subtitle { font-size:1.5rem; margin-bottom:1.25rem; font-family:'Poppins', sans-serif; line-height:2rem; color:#1e1e23; }
.booklet_intro_chapter_logos { flex-wrap:wrap; gap:1.25rem; margin-top:1.5rem; margin-bottom:1.5rem; white-space:nowrap; display:flex; flex-direction:row; align-items:center; }
.booklet_intro_chapter_logos .eu-flag-img { width:100px; }




/* =========================
   COLUMN DEFAULT COLORS (unchanged)
   ========================= */
.options .option:nth-child(1)  { --defaultBackground:#15004a !important; }
.options .option:nth-child(2)  { --defaultBackground:#1f0e5d !important; }
.options .option:nth-child(3)  { --defaultBackground:#2b1870 !important; }
.options .option:nth-child(4)  { --defaultBackground:#372283 !important; }
.options .option:nth-child(5)  { --defaultBackground:#432d96 !important; }
.options .option:nth-child(6)  { --defaultBackground:#5039a8 !important; }
.options .option:nth-child(7)  { --defaultBackground:#604ab8 !important; }
.options .option:nth-child(8)  { --defaultBackground:#705ac6 !important; }
.options .option:nth-child(9)  { --defaultBackground:#806ad3 !important; }
.options .option:nth-child(10) { --defaultBackground:#9079df !important; }


/* Expanded state backgrounds (fixed targeting; keep your palette) */
.options .option:nth-child(1).expanded  { background-color:#15004a !important; }
.options .option:nth-child(2).expanded  { background-color:#1f0e5d !important; }
.options .option:nth-child(3).expanded  { background-color:#2b1870 !important; }
.options .option:nth-child(4).expanded  { background-color:#372283 !important; }
.options .option:nth-child(5).expanded  { background-color:#432d96 !important; }
.options .option:nth-child(6).expanded  { background-color:#5039a8 !important; }
.options .option:nth-child(7).expanded  { background-color:#604ab8 !important; }
.options .option:nth-child(8).expanded  { background-color:#705ac6 !important; }
.options .option:nth-child(9).expanded  { background-color:#806ad3 !important; }
.options .option:nth-child(10).expanded { background-color:#9079df !important; }


/* =========================
   TEXT & ICON COLORS PER COLUMN (to match screenshot)
   ========================= */

/* Cols 1–5 (dark): white text/icons */
.options .option:nth-child(-n+5) .label .info .main,
.options .option:nth-child(-n+5) .label .info .sub,
.options .option:nth-child(-n+5) .label,
.options .option:nth-child(-n+5) .label a,
.options .option:nth-child(-n+5) .label .icon i {
  color:#fff !important;
}

/* Cols 6–9 (light): deep purple text/icons */
.options .option:nth-child(n+6) .label .info .main,
.options .option:nth-child(n+6) .label .info .sub,
.options .option:nth-child(n+6) .label,
.options .option:nth-child(n+6) .label a,
.options .option:nth-child(n+6) .label .icon i {
  color:#230078 !important;
}

/* Keep white circular course markers crisp on light cols */
.options .option:nth-child(n+6) .label .marker,
.options .option:nth-child(n+6) .label .dot {
  background:#fff !important; border-color:#fff !important;
}

/* Expanded column should keep its per-column color scheme */
.options .option.expanded .label .info .main,
.options .option.expanded .label .info .sub,
.options .option.expanded .label,
.options .option.expanded .label a,
.options .option.expanded .label .icon i {
  color: inherit !important;
}

/* =========================
   MISC (kept from your file)
   ========================= */
tr, td { border:1px solid black; }
.m-0 { margin-right:50px !important; }

.options .option .label .info .main,
.options .option.option.collapsed .label .info .main {
  font-size:1.5rem !important; font-weight:bold !important;
}

/* Specific icon color overrides you had (kept) */
body > main > div.options > div:nth-child(5) > div.label > div.icon > i,
body > main > div.options > div:nth-child(6) > div.label > div.icon > i,
body > main > div.options > div:nth-child(4) > div.label > div.icon > i { color:#230078 !important; }

#offcanvasMainMenu {
  display: none !important;
}



.content .options .option .label,
.content .options .option .label a,
.content .options .option .label .info .main,
.content .options .option .label .info .sub
 {
  color: #f8f7fc !important; /* off-white that works on dark and pastel */
}

/* FINAL ICON COLOR OVERRIDE — keeps circle white, makes glyph purple */

/* 1) Parent circle stays white */
.content .options .option .label .icon {
  background-color: #fff !important;
  color: #230078 !important;               /* sets currentColor for children */
  /* For Font Awesome duotone kits */
  --fa-primary-color: #230078;
  --fa-secondary-color: #230078;
}

/* 2) Hit the actual glyphs (Font Awesome <i> and SVG) */
.content .options .option .label .icon i,
.content .options .option .label .icon svg,
.content .options .option .label .icon .fa-solid,
.content .options .option .label .icon .fa-regular,
.content .options .option .label .icon .fa-light,
.content .options .option .label .icon .fa-brands,
.content .options .option .label .icon svg path,
.content .options .option .label .icon svg use {
  color: #230078 !important;
  fill: #230078 !important;
  stroke: #230078 !important;
}

/* 3) Nuke any old rules that forced white (wins on specificity + order) */
.content .options .option:nth-child(n) .label .icon i,
.content .options .option:nth-child(n) .label .icon svg {
  color: #230078 !important;
  fill: #230078 !important;
}

.options .option {
    position: relative !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
    /* 3D multi-layer shadow for depth */
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.25),
        0 10px 24px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.08),
        inset 0 -4px 8px rgba(0, 0, 0, 0.15) !important;
    transform-style: preserve-3d !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.options .option::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(0, 0, 0, 0.12) 100%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Pop-out on hover */
.options .option:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.3),
        0 14px 28px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.08),
        inset 0 -4px 8px rgba(0, 0, 0, 0.15) !important;
}