/* Custom Scrollbar for Modal */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #75b2e1; /* TVOJA NOVA PLAVA */
}

/* Nav Link Hover */
.nav-link {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  transition: color 0.3s;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #75b2e1;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* --- TRANSPARENT HEADER (on hero) --- */
#main-header {
  background: transparent;
  border-bottom: 1px solid transparent;
}

#main-header .header-nav-link {
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

#main-header .header-nav-link:hover {
  color: #75b2e1;
}

#main-header .header-divider {
  background-color: rgba(255,255,255,0.3);
}

#main-header .header-logo {
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

#main-header .header-btn {
  background: white;
  color: #2d3748;
}

#main-header .header-hamburger {
  background-color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* --- SCROLLED HEADER (solid) --- */
#main-header.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}

#main-header.scrolled .header-nav-link {
  color: #4a5568;
  text-shadow: none;
}

#main-header.scrolled .header-nav-link:hover {
  color: #75b2e1;
}

#main-header.scrolled .header-divider {
  background-color: #e2e8f0;
}

#main-header.scrolled .header-logo {
  filter: none;
}

#main-header.scrolled .header-btn {
  background: linear-gradient(to right, #75b2e1, #5a9bc8);
  color: white;
}

#main-header.scrolled .header-hamburger {
  background-color: #2d3748;
  box-shadow: none;
}

/* Modal Service Card Selection */
.service-select-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  text-align: center;
  height: 100%;
}

.service-select-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(117, 178, 225, 0.2); /* Soft Blue Shadow */
  border-color: #75b2e1;
}

.service-select-card.selected {
  background-color: #f0f9ff;
  border-color: #75b2e1;
  box-shadow: 0 0 0 2px #75b2e1;
}

/* Time Slot Selection */
.time-slot {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a5568;
  background: white;
  transition: all 0.2s;
}
.time-slot:hover,
.time-slot.selected {
  background-color: #75b2e1; /* TVOJA NOVA PLAVA */
  color: white;
  border-color: #75b2e1;
  box-shadow: 0 4px 12px rgba(117, 178, 225, 0.3);
}

/* Reveal Animations */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-reveal {
  opacity: 0; /* Initial state */
  animation: revealUp 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}

/* Hamburger Menu Animation */
.hamburger-line {
  display: block;
  /* Sirine su definisane u HTML-u klasama */
}

#menu-btn:hover .hamburger-line {
  width: 28px !important; /* Make lines even on hover */
}

#menu-btn.active .top {
  transform: translateY(8px) rotate(45deg);
  width: 28px !important;
}
#menu-btn.active .middle {
  opacity: 0;
}
#menu-btn.active .bottom {
  transform: translateY(-8px) rotate(-45deg);
  width: 28px !important;
}

/* --- SCROLL REVEAL UTILITIES --- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Delays (da ne idu svi odjednom) */
.delay-100 {
  transition-delay: 0.1s;
}
.delay-200 {
  transition-delay: 0.2s;
}
.delay-300 {
  transition-delay: 0.3s;
}
.delay-400 {
  transition-delay: 0.4s;
}

/* --- FLOATING BACKGROUND ORBS ANIMATION --- */
@keyframes floatSlow {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes floatReverse {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-30px, 50px) scale(0.9);
  }
  66% {
    transform: translate(20px, -20px) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

.animate-float-slow {
  animation: floatSlow 15s infinite ease-in-out;
}

.animate-float-reverse {
  animation: floatReverse 18s infinite ease-in-out;
}

/* --- PROCESS SECTION STYLES --- */

/* Active Step Card Container */
.process-step.active > div {
  box-shadow: 0 10px 40px rgba(117, 178, 225, 0.15);
  border-color: rgba(117, 178, 225, 0.3) !important;
}

/* Active step icon box (the square with icon) */
.process-step.active .rounded-xl.bg-gray-50 {
  background-color: #75b2e1 !important;
}
.process-step.active .rounded-xl.bg-gray-50 i {
  color: white !important;
}

/* Active step title */
.process-step.active h3 {
  color: #75b2e1 !important;
}

/* Active step description - expand with smooth animation */
.process-step p {
  transition: max-height 0.5s ease, opacity 0.3s ease;
}
.process-step.active p {
  max-height: 80px !important;
  opacity: 1 !important;
}
.process-step:not(.active) p {
  max-height: 0 !important;
  opacity: 0 !important;
}

/* Active step large background number */
.process-step.active .text-\[120px\] {
  color: rgba(117, 178, 225, 0.1) !important;
}

/* Active step arrow circle */
.process-step.active .w-8.rounded-full {
  background-color: #f0f9ff !important;
}
.process-step.active .w-8.rounded-full i {
  color: #75b2e1 !important;
}

/* Image Transitions */
.process-img {
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.process-img.active {
  opacity: 1 !important;
  transform: scale(1) !important;
}
.process-img:not(.active) {
  opacity: 0 !important;
  transform: scale(1.05) !important;
}

/* --- TESTIMONIAL ANIMATIONS --- */
@keyframes pulseSlow {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.animate-pulse-slow {
  animation: pulseSlow 3s infinite ease-in-out;
}

/* --- FAQ ACTIVE STYLES (HARD FIX) --- */
.faq-item.active {
  border-color: #75b2e1; /* Plava ivica kad je otvoren */
  box-shadow: 0 10px 30px rgba(117, 178, 225, 0.2);
}

.faq-item.active .faq-icon {
  background-color: #75b2e1;
  color: white;
}

.faq-item.active .faq-icon i {
  transform: rotate(45deg); /* Plus u X */
}

/* Opcionalno: hover efekat kad nije otvoren */
.faq-item:hover:not(.active) {
  border-color: #75b2e1;
}

/* --- PREMIUM MODAL STYLES --- */

/* Service Option Selected State */
.service-option.selected {
  border-color: #75b2e1;
  background-color: #f0f9ff;
}

.service-option.selected .radio-circle {
  border-color: #75b2e1;
}

.service-option.selected .radio-circle div {
  opacity: 1;
}

/* Animations for Steps (Slide Effect) */
.step-panel.active {
  display: block !important;
  transform: translateX(0);
  opacity: 1;
}

.step-panel.prev {
  transform: translateX(-100%);
  opacity: 0;
}

.step-panel.next {
  transform: translateX(100%);
  opacity: 0;
}

/* Modal Open/Close Animation */
#booking-modal.open {
  display: block;
  opacity: 1;
}

#booking-modal.open #modal-content-box {
  transform: translate(-50%, -50%) scale(1);
}

/* Aktivni korak (Povecava se) */
.step-indicator.active div {
  transform: scale(1.15);
  border-color: #75b2e1;
  color: #75b2e1;
  box-shadow: 0 0 20px rgba(117, 178, 225, 0.4);
  background: white;
}

/* Tekst aktivnog koraka */
.step-indicator.active span {
  color: #2d3748;
  text-shadow: 0 0 1px rgba(117, 178, 225, 0.3);
}

/* Zavrseni koraci (Puni plavi krug) */
.step-indicator.completed div {
  background-color: #75b2e1;
  border-color: #75b2e1;
  color: white;
  transform: scale(1);
  box-shadow: none;
}

/* 1. AKTIVAN KORAK (Sija Plavo i Povecan) */
.step-indicator.active .step-circle {
  border-color: #75b2e1;
  color: #75b2e1;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(117, 178, 225, 0.2); /* Prsten oko kruga */
}

.step-indicator.active span {
  color: #2d3748; /* Tamnija boja teksta */
  font-weight: 800;
}

/* 2. ZAVRSEN KORAK (Pun Plavi sa Kvacicom) */
.step-indicator.completed .step-circle {
  background-color: #75b2e1;
  border-color: #75b2e1;
  color: white;
  transform: scale(1);
}

.step-indicator.completed span {
  color: #2d3748;
}

/* Osigurac da se linija ne vidi ako je ostala u HTML-u */
#progress-line,
.progress-glow {
  display: none !important;
}

/* --- PREMIUM INVISIBLE/SOFT SCROLLBAR --- */

/* Tanka i neupadljiva traka */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px; /* Vrlo tanko */
  height: 4px; /* Za svaki slucaj ako se pojavi dole */
}

/* Pozadina trake (nevidljiva) */
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/* Sama linija koja se pomera (Thumb) */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #e2e8f0; /* Jako svetlo siva, jedva vidljiva */
  border-radius: 10px;
}

/* Na hover samo malo potamni, nema vise plave */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #cbd5e0;
}

/* --- SMOOTH ACCORDION (GRID TRICK) --- */

/* Wrapper animira grid redove */
.accordion-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-out;
}

/* Kada je roditelj (.process-step) aktivan, wrapper dobija punu visinu */
.process-step.active .accordion-wrapper {
  grid-template-rows: 1fr;
}

/* Unutrasnji div mora da sakrije visak */
.accordion-inner {
  overflow: hidden;
}

/* Tekst fade-in efekat */
.process-step.active .step-text {
  opacity: 1;
}
.process-step:not(.active) .step-text {
  opacity: 0;
}

/* Progress bar animation */
.step-progress {
  transition: width 0.5s ease-out;
}

/* --- FAQ ACTIVE STYLES (IMPROVED ANIMATION) --- */

/* Stil za aktivnu stavku (okvir i senka) */
.faq-item.active {
  border-color: #75b2e1;
  box-shadow: 0 10px 30px rgba(117, 178, 225, 0.2);
}

/* Animacija za ikonicu */
.faq-item .faq-icon {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Glatka tranzicija */
}

/* Stil za ikonicu kada je aktivna */
.faq-item.active .faq-icon {
  background-color: #75b2e1;
  color: white;
  transform: rotate(135deg); /* Rotacija za 135 stepeni (lepše od 45) */
}

/* Opcionalno: hover efekat na ikonicu kad nije aktivna */
.faq-item:not(.active):hover .faq-icon {
  background-color: #f0f9ff; /* Vrlo svetlo plava */
  color: #75b2e1;
  transform: scale(1.1); /* Blago povecanje */
}

/* --- PREMIUM DATE & TIME STYLES --- */

/* 1. Ulepsavanje Date Input-a */
.custom-date-wrapper {
  position: relative;
  border-radius: 1rem;
  background: #f8fafc;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.custom-date-wrapper:hover,
.custom-date-wrapper:focus-within {
  background: white;
  border-color: #75b2e1;
  box-shadow: 0 10px 30px -10px rgba(117, 178, 225, 0.4);
  transform: translateY(-2px);
}

/* Sakrivanje default ikonice kalendara da bismo koristili nasu */
input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

/* 2. Time Slot Dugmici */
.time-slot-btn {
  border: 1px solid #edf2f7;
  background: white;
  color: #4a5568;
  font-weight: 700;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.time-slot-btn:hover {
  border-color: #75b2e1;
  color: #75b2e1;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(117, 178, 225, 0.2);
}

.time-slot-btn.selected {
  background: linear-gradient(135deg, #75b2e1 0%, #63b3ed 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 5px 20px rgba(117, 178, 225, 0.4);
  transform: scale(1.05);
}

/* --- PREMIUM CALENDAR DESIGN (FLATPICKR) --- */

/* Glavni okvir kalendara */
.flatpickr-calendar {
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px -10px rgba(117, 178, 225, 0.3) !important;
  padding: 15px !important;
  background: #ffffff !important;
  font-family: "Lato", sans-serif !important;
}

/* Zaglavlje (Mesec i Godina) */
.flatpickr-month {
  color: #2d3748 !important;
  fill: #2d3748 !important;
  margin-bottom: 10px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 700 !important;
}

/* Dani u nedelji (Pon, Uto...) */
span.flatpickr-weekday {
  color: #cbd5e0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* Brojevi dana */
.flatpickr-day {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  color: #4a5568 !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

/* Hover na dan */
.flatpickr-day:hover {
  background: #f0f9ff !important;
  border-color: #75b2e1 !important;
  color: #75b2e1 !important;
}

/* SELEKTOVAN DAN (Tvoja plava boja) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  background: #75b2e1 !important;
  border-color: #75b2e1 !important;
  color: white !important;
  box-shadow: 0 5px 15px rgba(117, 178, 225, 0.4) !important;
}

/* Danasnji dan (samo outline) */
.flatpickr-day.today {
  border-color: #e2e8f0 !important;
}
.flatpickr-day.today:hover {
  border-color: #75b2e1 !important;
  background: #f0f9ff !important;
  color: #75b2e1 !important;
}

/* Disabled dani (prosli datumi) */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #cbd5e0 !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  opacity: 0.5 !important;
}
.flatpickr-day.flatpickr-disabled:hover {
  box-shadow: none !important;
}

/* Arrow buttons */
.flatpickr-prev-month,
.flatpickr-next-month {
  fill: #75b2e1 !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: #2d3748 !important;
}

/* Scroll Mouse Animation */
@keyframes scroll-bounce {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}
.animate-scroll-bounce {
  animation: scroll-bounce 1.5s infinite;
}

/* Fade In Animations (Tailwind helperi) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0; /* Start hidden */
}
.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-500 {
  animation-delay: 0.5s;
}
.delay-700 {
  animation-delay: 0.7s;
}

/* --- REVIEW SECTION ANIMATIONS --- */

/* Slow Zoom za pozadinsku sliku */
@keyframes slow-zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.animate-slow-zoom {
  animation: slow-zoom 20s infinite alternate ease-in-out;
}

/* Infinite Marquee za kartice (Horizontalno skrolovanje) */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  display: flex;
  width: fit-content;
  animation: marquee 40s linear infinite;
}

/* Pauziraj animaciju kad mis pređe preko */
.hover\:pause:hover .animate-marquee {
  animation-play-state: paused;
}

/* Glassmorphism kartica */
.review-glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- HERO MODERN ANIMATIONS (Framer-style) --- */

/* Video-like Ken Burns - More dynamic movement */
@keyframes kenBurnsVideo {
  0% {
    transform: scale(1.05) translate(0, 0);
    filter: brightness(1);
  }
  20% {
    transform: scale(1.12) translate(-1.5%, 1%);
    filter: brightness(1.02);
  }
  40% {
    transform: scale(1.18) translate(1%, -1.5%);
    filter: brightness(0.98);
  }
  60% {
    transform: scale(1.15) translate(-0.5%, 2%);
    filter: brightness(1.03);
  }
  80% {
    transform: scale(1.1) translate(2%, 0.5%);
    filter: brightness(0.97);
  }
  100% {
    transform: scale(1.05) translate(0, 0);
    filter: brightness(1);
  }
}

.hero-ken-burns {
  animation: kenBurnsVideo 30s ease-in-out infinite;
  will-change: transform;
}

/* Subtle breathing/focus effect */
@keyframes breatheFocus {
  0%, 100% {
    filter: blur(0px) brightness(1);
  }
  50% {
    filter: blur(0.5px) brightness(1.05);
  }
}

.hero-breathe {
  animation: breatheFocus 8s ease-in-out infinite;
}

/* Cinematic vignette pulse */
@keyframes vignettePulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-vignette {
  animation: vignettePulse 6s ease-in-out infinite;
}

/* Staggered card reveal */
@keyframes slideInCard {
  0% {
    opacity: 0;
    transform: translateY(40px) rotate(0deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--rotate, 0deg)) scale(1);
  }
}

.animate-card-reveal {
  opacity: 0;
  animation: slideInCard 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hero review cards hover effect */
.hero-review-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-review-card:hover {
  transform: translateX(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Floating shapes animation */
@keyframes floatShape1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(50px, -30px) rotate(90deg);
  }
  50% {
    transform: translate(20px, 40px) rotate(180deg);
  }
  75% {
    transform: translate(-30px, 20px) rotate(270deg);
  }
}

@keyframes floatShape2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-40px, 50px) scale(1.2);
  }
  66% {
    transform: translate(60px, -20px) scale(0.8);
  }
}

@keyframes floatShape3 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translate(-60px, -40px) rotate(180deg);
    opacity: 0.6;
  }
}

.animate-float-shape-1 {
  animation: floatShape1 20s ease-in-out infinite;
}

.animate-float-shape-2 {
  animation: floatShape2 25s ease-in-out infinite;
}

.animate-float-shape-3 {
  animation: floatShape3 18s ease-in-out infinite;
}

/* Gradient shift animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
}

/* Subtle glow pulse */
@keyframes glowPulse {
  0%, 100% {
    opacity: 0.4;
    filter: blur(80px);
  }
  50% {
    opacity: 0.7;
    filter: blur(100px);
  }
}

.animate-glow-pulse {
  animation: glowPulse 8s ease-in-out infinite;
}

/* Parallax drift */
@keyframes parallaxDrift {
  0% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(-20px) translateX(10px);
  }
}

.animate-parallax-drift {
  animation: parallaxDrift 10s ease-in-out infinite alternate;
}