.action-inner-wraper, .navigation-indicator-t {
    display: none;
}

/* Floating nav + tooltip */
.navigationFloating {
  width: auto !important;
  max-width: calc(100vw - 40px) !important;

  padding: 14px 22px !important;
  border-radius: 60px !important;

  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;

  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  overflow: visible !important; /* allow tooltip */
}

/* Desktop buttons wrapper */
.navigationFloating .desktopNavButtons {
  
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
}

/* Each icon button */
.navigationFloating .desktopNavButtons a.floatingButton {
  position: relative !important;

  width: 44px !important;
  height: 44px !important;

 
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  text-decoration: none !important;
  cursor: pointer !important;
}

/* Hide labels (your text is in .tekst) */
.navigationFloating .desktopNavButtons a.floatingButton .tekst {
  display: none !important;
}

/* Center the icon holder */
.navigationFloating .desktopNavButtons a.floatingButton .iconHolder {
 
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;
}

/* Make icons consistent (Font Awesome <i>) */
.navigationFloating .desktopNavButtons a.floatingButton .iconHolder i {
  font-size: 22px !important;
  line-height: 1 !important;

  color: #ffffff !important;
  opacity: 0.85 !important;

  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Hover */
.navigationFloating .desktopNavButtons a.floatingButton:hover .iconHolder i {
  transform: scale(1.1) !important;
  opacity: 1 !important;
}

/* ==========================================
   TOOLTIP (same style as before)
   Uses title="" from your <a>
========================================== */

.navigationFloating .desktopNavButtons a.floatingButton:hover::after {
  content: attr(title);

  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);

  background: rgba(20, 20, 30, 0.95);
  color: #fff;

  font-size: 13px;
  line-height: 1.1;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;

  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  pointer-events: none;

  opacity: 0;
  animation: fadeInTooltip 0.2s forwards;
}

.navigationFloating .desktopNavButtons a.floatingButton:hover::before {
  content: "";
  position: absolute;
  bottom: 128%;
  left: 50%;
  transform: translateX(-50%);

  border-width: 6px;
  border-style: solid;
  border-color: rgba(20, 20, 30, 0.95) transparent transparent transparent;

  opacity: 0;
  animation: fadeInTooltip 0.2s forwards;
}

@keyframes fadeInTooltip {
  to { opacity: 1; }
}

/* Force the pill height */
.navigationFloating {
  height: 56px !important;        /* <- change this value */
  min-height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  align-items: center !important;  /* keep icons vertically centered */
}

/* Make the inner desktop wrapper match the pill height */
.navigationFloating .desktopNavButtons {
  height: 56px !important;        /* same as above */
 
  align-items: center !important;
}

/* Make each button fit inside the pill */
.navigationFloating .desktopNavButtons a.floatingButton {
  height: 36px !important;        /* icon hit-area inside pill */
  width: 44px !important;         /* keep width same if you want */
 
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================
   GLOBAL MUTE — FORCE TOP RIGHT (BUTTON FIXED)
========================================== */

/* Optional: ensure wrapper doesn't interfere */
react-root[data-id="global-mute"]{
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

/* ✅ Force the ACTUAL button to top-right */
react-root[data-id="global-mute"] button{
  position: fixed !important;

  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;

  /* kills any existing centering like left:50% + translateX */
  margin: 0 !important;
  transform: none !important;

  z-index: 99999 !important;

  /* ===== look & feel: solid black ===== */
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;

  background: #000 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 8px 20px rgba(0,0,0,0.45) !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}

/* Icon */
react-root[data-id="global-mute"] button i{
  font-size: 14px !important;
  color: #fff !important;
  line-height: 1 !important;
}

/* Hover */
react-root[data-id="global-mute"] button:hover{
  background: #111 !important;
  transform: scale(1.08) !important;
}

/* If Bootstrap tries to recolor it */
react-root[data-id="global-mute"] button.btn,
react-root[data-id="global-mute"] button.btn-primary{
  background: #000 !important;
}

/* ==========================================
   CLEAN SELECTED ICON (PROPORTIONAL)
========================================== */

/* Premium active look */
.navigationFloating 
.desktopNavButtons 
a.floatingButton.selectedButton .iconHolder {

  border-radius: 50% !important;

  background: rgba(255, 255, 255, 0.18) !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.4),
    0 4px 12px rgba(0,0,0,0.25);

  backdrop-filter: blur(8px);

  transition: all 0.25s ease !important;
}

/* Keep icon strong */
.navigationFloating.nav-pos-intro
.desktopNavButtons
a.floatingButton .iconHolder.selectedIcon i {
  color: #fff !important;
  opacity: 1 !important;
}

/* ==========================================
   SUBMENU — MATCH FLOATING NAV GLASS
========================================== */
.subMenu{
  position: absolute !important;
  z-index: 9999 !important;

  /* slightly stronger glass */
  background: rgba(255, 255, 255, 0.12) !important;

  /* stronger blur */
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(140%) !important;

  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 18px !important;

  padding: 10px 0 !important;
  min-width: 220px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 14px 36px rgba(0,0,0,0.35) !important;
}

.navigationFloating{
  position: relative;
  overflow: hidden;
}

.navigationFloating::before{
  content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05)
  );

  border-radius: inherit;
  pointer-events:none;
}

/* submenu row */
.subMenuItem{
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, opacity 0.2s ease !important;
}

/* submenu text */
.subMenuTxt{
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 0.9 !important;
}

/* hover row background */
.subMenuItem:hover{
  background: rgba(255,255,255,0.12) !important;
}

/* hover text */
.subMenuItem:hover .subMenuTxt{
  opacity: 1 !important;
}

/* ==========================================
   TRANSITION SKIP — PRESKOČI BUTTON
========================================== */

button.action-btn.allowed.skip.transition-skip-bottom{

  position: fixed !important;
  left: 50% !important;
  bottom: 40px !important;
  transform: translateX(-50%) !important;

  display: flex !important;
  align-items: center !important;
  gap: 2px !important;

  padding: 10px 26px !important;

  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;

  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;

  color: #fff !important;
  font-weight: 550 !important;

  font-size: 0 !important; /* hide original "Skip" */

  box-shadow: 0 12px 32px rgba(0,0,0,0.35) !important;

  z-index: 99999 !important;

  transition: transform .18s ease, background .18s ease !important;
}

/* hide the black icon */
button.action-btn.allowed.skip.transition-skip-bottom i{
  display: none !important;
}

/* custom label */
button.action-btn.allowed.skip.transition-skip-bottom::before{
  content: "PRESKOČI";
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #fff;
}

/* white arrows */
button.action-btn.allowed.skip.transition-skip-bottom::after{
  content: "››";
  margin-left: 4px;
  font-size: 17px;
  color: #fff;
}

/* hover */
button.action-btn.allowed.skip.transition-skip-bottom:hover{
  background: rgba(255,255,255,0.16) !important;
  transform: translateX(-50%) scale(1.05) !important;
}

/* Hide nav while Skip is visible (most robust CSS-only) */
body:has(#transitionSkipButton:not([style*="display: none"]):not([style*="visibility: hidden"]):not([style*="opacity: 0"])) .navigationFloating,
body:has(#floatingSkipButton:not(.disabled):not([style*="display: none"]):not([style*="visibility: hidden"]):not([style*="opacity: 0"])) .navigationFloating {
  display: none !important;
}


/* ==========================================
   PREMIUM GLASS MODAL — CINEMATIC LOOK
   Matches Floating Navigation Style
========================================== */

/* Modal container */
.modal-content {

   /* slightly darker than before (was 0.08) */
  background: rgba(255, 255, 255, 0.06) !important;

  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;

  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 24px !important;

  /* refined premium depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 25px 60px rgba(0,0,0,0.45) !important;

  color: #ffffff !important;
}

/* Header */
.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 18px 24px !important;
  background: rgba(255,255,255,0.04);
}

/* Title */
.modal-title {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
}

/* Body */
.modal-body {
  padding: 24px !important;
  color: #ffffff !important;
}

/* All text inside modal */
.modal-content,
.modal-content p,
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6,
.modal-content span,
.modal-content div {
  color: #ffffff !important;
}

/* Paragraph spacing for elegance */
.modal-body p {
  line-height: 1.6;
  opacity: 0.95;
}

/* Close button (white minimal) */
.modal-content .btn-close {
  filter: invert(1) brightness(2);
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal-content .btn-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Optional: darker cinematic backdrop */
.modal-backdrop.show {
  background-color: rgba(0,0,0,0.65) !important;
}

/* Optional: smooth fade animation */
.modal.fade .modal-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.modal.fade .modal-dialog {
  transform: translateY(10px);
}

.modal.show .modal-dialog {
  transform: translateY(0);
}