/* SLIDER FŐ KONTÉNER */
.image-slider {
   position: relative;
   width: 100%;
   margin: 20px 0;
}

/* 100VH MÓD */
.image-slider.slider-fullheight {
   margin: 0;
   height: 100vh;
}

.image-slider.slider-customheight {
   margin: 0;
}

/* KÉPEK KONTÉNERE */
.slider-images {
   position: relative;
   width: 100%;
   padding-bottom: 62.5%; /* 16:10 alapértelmezett arány, módosítható */
   overflow: hidden;
}

/* 100VH vagy custom height esetén */
.slider-fullheight .slider-images,
.slider-customheight .slider-images {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   padding-bottom: 0;
}

/* 100vh vagy custom height esetén */
.slider-images[style*="height"] {
   padding-bottom: 0 !important;
}

.slider-images img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover; /* A képek kitöltik a konténert */
   opacity: 0;
   transition: opacity 0.6s ease-in-out;
   pointer-events: none;
}

.slider-images img.active {
   opacity: 1;
   pointer-events: auto;
   z-index: 1;
}

/* KÉPCÍM (CAPTION) */
.slider-image-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
   color: #fff;
   padding: 40px 20px 20px;
   font-size: 16px;
   line-height: 1.5;
   opacity: 0;
   transition: opacity 0.6s ease-in-out;
   z-index: 2;
   pointer-events: none;
}

.slider-images img.active + .slider-image-caption,
.slider-images a img.active + .slider-image-caption {
   opacity: 1;
}

/* Caption HTML támogatás */
.slider-image-caption h1,
.slider-image-caption h2,
.slider-image-caption h3,
.slider-image-caption h4 {
   margin: 0 0 10px 0;
   font-weight: bold;
}

.slider-image-caption p {
   margin: 0 0 10px 0;
}

.slider-image-caption a {
   color: #fff;
   text-decoration: underline;
}

.slider-image-caption a:hover {
   color: #ddd;
}

/* LINKELHETŐ KÉPEK */
.slider-image-link {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
}

.slider-image-link img {
   cursor: pointer;
}

/* LINK KONTÉNER */
.slider-image-link {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
   opacity: 0;
   transition: opacity 0.6s ease-in-out;
   pointer-events: none;
   z-index: 1;
}

.slider-image-link.active {
   opacity: 1;
   pointer-events: auto;
   z-index: 2;
}

.slider-image-link img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* KÉP FELIRAT (CAPTION) */
.slider-image-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
   color: white;
   padding: 30px 20px 20px;
   z-index: 10;
   font-size: 16px;
   line-height: 1.5;
}

.slider-image-caption p {
   margin: 0 0 10px 0;
}

.slider-image-caption p:last-child {
   margin-bottom: 0;
}

.slider-image-caption h1,
.slider-image-caption h2,
.slider-image-caption h3,
.slider-image-caption h4 {
   margin: 0 0 10px 0;
   color: white;
   font-weight: bold;
}

.slider-image-caption h1 {
   font-size: 32px;
}

.slider-image-caption h2 {
   font-size: 28px;
}

.slider-image-caption h3 {
   font-size: 24px;
}

.slider-image-caption a {
   color: #fff;
   text-decoration: underline;
}

.slider-image-caption a:hover {
   color: #ddd;
}

/* NAVIGÁCIÓS GOMBOK - OVERLAY MODE */
.slider-nav-overlay {
   position: absolute;
   bottom: 30px;
   right: 30px;
   display: flex;
   gap: 10px;
   z-index: 10;
}

.slider-nav-overlay button {
   background-color: #0d79bf;
   color: #fff;
   border: none;
   width: 34px;
   height: 34px;
   border-radius: 5px;
   cursor: pointer;
   font-size: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   padding: 0;
}

.slider-nav-overlay button:hover {
   background-color: #db2c29;
}

.slider-nav-overlay button:active {

}

/* THUMBNAIL NÉZET */
.slider-thumbnails {
   display: flex;
   gap: 10px;
   padding: 15px 0;
   overflow-x: auto;
   overflow-y: hidden;
   background: #fff;
   scrollbar-width: thin;
   scrollbar-color: #888 #f1f1f1;
}

.slider-thumbnails::-webkit-scrollbar {
   height: 8px;
}

.slider-thumbnails::-webkit-scrollbar-track {
   background: #f1f1f1;
}

.slider-thumbnails::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 4px;
}

.slider-thumbnails::-webkit-scrollbar-thumb:hover {
   background: #555;
}

.slider-thumbnail {
   flex-shrink: 0;
   width: 100px;
   height: 70px;
   cursor: pointer;
   overflow: hidden;
   border: 3px solid transparent;
   border-radius: 4px;
   transition: all 0.3s ease;
   position: relative;
}

.slider-thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.3s ease;
}

.slider-thumbnail:hover img {
   transform: scale(1.1);
}

.slider-thumbnail.active {
   border-color: #007bff;
   box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.slider-thumbnail.active::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 123, 255, 0.2);
   pointer-events: none;
}

/* RESZPONZÍV KIALAKÍTÁS */
@media (max-width: 768px) {
   .slider-nav-overlay {
      bottom: 10px;
      right: 10px;
      gap: 8px;
   }
   
   .slider-nav-overlay button {
      width: 35px;
      height: 35px;
      font-size: 16px;
   }
   
   .slider-thumbnail {
      width: 80px;
      height: 56px;
   }
}

@media (max-width: 480px) {
   .slider-nav-overlay button {
      width: 30px;
      height: 30px;
      font-size: 14px;
   }
   
   .slider-thumbnail {
      width: 70px;
      height: 49px;
   }
}

/* AUTOPLAY INDIKÁTOR (opcionális) */
.slider-autoplay-indicator {
   position: absolute;
   top: 10px;
   left: 10px;
   background: rgba(0, 0, 0, 0.6);
   color: white;
   padding: 5px 10px;
   border-radius: 3px;
   font-size: 12px;
   z-index: 10;
   display: none;
}

.slider-autoplay-indicator.active {
   display: block;
}

/* BETÖLTÉSI ANIMÁCIÓ */
.slider-loading {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 5;
}

.slider-loading::after {
   content: '';
   display: block;
   width: 40px;
   height: 40px;
   border: 4px solid #f3f3f3;
   border-top: 4px solid #007bff;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}