/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/



/* Add your custom styles here */
/* --- PODSTAWOWE STYLOWANIE --- */
.video-background {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

/* Video styling */
.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
	
}

/* Warstwa nakładki */
.overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Kontener wyśrodkowujący treść */
.content-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #fff;
}

/* Kontener na przyciski - ważne, by miał position: relative */
.buttons-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* --- BUBBLE BUTTON: wspólne style --- */
.bubble-button {
  position: absolute; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  color: #000;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 50px 0 0 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Efekt hover */
.bubble-button:hover {
  transform: scale(1.05);
  color: #fff;
}

/* Tekst przycisku */
.button-label {
  margin-right: 10px;
}

/* Białe kółko ze strzałką */
.arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -1.5em;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #C6007E; 
}



/* --- MEDIA QUERIES --- */
/* Poniżej dostosowujemy layout do mniejszych ekranów */

/* TABLET - np. do 992px */
@media (max-width: 992px) {  
  /* Możesz także zmniejszyć font-size przycisków, żeby ładniej wyglądały na tabletach */
  .bubble-button {
    font-size: 14px;
    padding: 8px 16px;
  }
  .arrow-circle {
    width: 35px;
    height: 35px;
  }
}

/* TELEFON - np. do 576px */
@media (max-width: 768px) {
  /* Tu możesz np. całkowicie zrezygnować z position:absolute 
     i pozwolić przyciskom ustawiać się jeden pod drugim */
  .buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    /* Można dodać jakiś margines u góry, aby nie były na samej górze */
    padding-top: 50px;
  }

  .bubble-button {
    position: unset !important;
    margin-bottom: 20px;
    border-radius: 50px; /* Pełne zaokrąglenie, bo nie potrzebujemy "ogonka" */
    width: 80%;         /* Szerokość przycisków na małych ekranach, np. 80% */
    max-width: 400px;   /* Jeśli chcesz ograniczyć, żeby nie rozciągały się na bardzo szerokich telefonach */
  }

  .arrow-circle {
    position: relative;
    right: -10px; /* Przywracamy do normy, bo nie mamy absolute */
    margin-left: 10px; 
  }
  
  /* Dalsze zmniejszenie fontów, jeśli potrzeba */
  .bubble-button {
    font-size: 14px;
    padding: 8px 16px;
  }
  .arrow-circle {
    width: 30px;
    height: 30px;
  }

}


.bubble-video {
    width: 450px;
    height: 300px;
    overflow: hidden;
    padding: 0;	
	background: none !important;
    backdrop-filter: none !important;
	box-shadow:none !important;
	
}

.bubble-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-control-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: none !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
	background: rgba(255, 255, 255, 0.5);
  	backdrop-filter: blur(5px);
    border-radius: 50px;
    width: auto;
    padding: 5px;
}

.video-control-button:hover {
    background: rgba(255, 255, 255, 0.5);
}

.volume-icon {
    width: 50px;
    height: 50px;
    color: #0092BC;
}

.muted .volume-wave {
    display: none;
}

/* Position the overlay video like a bubble button */
#overlayVideo {
    /* You can adjust these values to match your desired position */
	position:absolute;
    bottom: 0;
    right: 0;
}



@media (max-width: 768px) {
    .bubble-video {
        position: unset !important;
		display:block !important;
		width:500px!important;
		height 500px !important;
		margin-left: -8vw;
    }
}
.bubble-caption {
    position: absolute;
    bottom: 10px; 
    left: 50%;      /* Start from the horizontal center */
    transform: translateX(-50%); /* Centers the text horizontally */
    color: #fff;
    background: rgba(0, 0, 0, 0.7); /* Dark translucent background to help text stand out */
    padding: 8px 12px;
    border-radius: 4px;
    z-index: 3;     /* Higher than the button so text is clearly visible */
    font-size: 16px;
	text-align: center;
}

.go-back-icon:hover{
	cursor:pointer;
}

.bubble-button svg{
    position: absolute;
    font-size: 48px;
    background-color: #C6007E;
    border-radius: 50%;
    top:-4%;
    padding: 5px;
    fill:white;
}

@media only screen 
and (max-device-width: 768px)
 { 
    .main-view-container{
    position: unset !important;
    overflow-y: auto;
    overflow-x: hidden;
}
	 .bubble-button svg{
		 display:none;
	 }
	 .bubble-button .elementor-button-text span{
		 color:#C6007E;
	 }
    .bubble-video video {
    width: 100vw;

}
 }

.grid-container{
    max-height: 100vh;
}
.mobile-container{
    overflow-y: auto;
}
.items-container{
	overflow-y:auto;
	overflow-x:hidden;
	max-height:100vh;
}

.patient-gallery img {
    width: 25vw; /* 20% szerokości ekranu */
  max-width: 300px; /* Maksymalna szerokość */
  height: auto
  transition: filter 0.3s ease, transform 0.3s ease;
}
.patient-profile{
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    transition-delay: 0.3s;
    width: 25vw;
    max-width: 500px;
    height: auto;
    padding: 10px;
}

.patient-profile-mobile h2{
    color:#0092BC;
    font-weight: 700;
}

.patient-profile-mobile h3{
    color:#d50d8c;
}


html:has(.patient-id-1:hover) .patient-id-1{
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

html:has(.patient-id-2:hover) .patient-id-2{
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.patient-gallery img:hover{
    transform: scale(1.05);
}
.patient-gallery img:not(:hover) {
  filter: none;
}

.patient-gallery:has(img:hover) img:not(:hover) {
  filter: blur(3px);
}
.patient-profile h2{
    color:#0092BC;
    font-weight: 700;
}
.patient-profile{
    z-index: 2;
}
.patient-profile h3{
    color:#d50d8c;
}

.widget-image-caption{
	min-width:200px;
    position: absolute;
    top: -75px;
    font-size: 24px;
    color:#0092BC;
    font-weight: 700;
    background-color: #fffffff0;
    border-radius: 8px;
    padding: 5px;
    width: 110%;
}

@media (max-width: 992px) {
  .patient-gallery img {
    width: 25vw;
    max-width: 150px;
  }

  .patient-profile {
    width: 40vw;
    max-width: 250px;
    font-size: 14px;
  }
  
  .patient-profile h2{
      font-size: 20px;
  }
  
  .patient-profile h3{
      font-size: 18px;
  }
}

@media (max-width: 576px) {
  .patient-gallery img{
      display: flex;
      flex-direction: column; /* Ustawienie w jednej kolumnie */
      align-items: center;
  }
  .patient-gallery img {
    width: 40vw;
    max-width: 120px;
  }

  .patient-profile {
    width: 80vw;
    max-width: 200px;
    font-size: 12px;
  }
  .patient-profile h2{
      font-size: 18px;
  }
  .patient-profile h3{
      font-size: 16px;
  }
}

.bubble-desc{
  position: absolute; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  color: #000;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background-color 0.2s ease;

}
.patient-id-1 .wp-caption-text a, .patient-id-2 .wp-caption-text a{
	color:#0092bc !important;
	font-family: Noto Sans !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	font-style:normal;
}
.stoisko-button{
	color: black !important;
	font-family: Noto Sans !important;
}
.important-button{
	box-shadow:0 0 0 2px #C6007E, 0 0 10px rgba(0, 0, 0, 0.2) !important;
}

.start-label {
  position: absolute;  
  bottom: 70px;        /* Nieco wyżej niż button (który ma bottom:10px) */
  right: 10px;         /* Taka sama wartość jak przycisk, żeby się pokrywały na osi X */
	cursor:pointer;
  
  /* Wygląd i czytelność napisu */
  color:#C6007E;
	font-weight:500;
  background: rgba(255, 255, 255, 0.6);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;      /* Możesz dostosować według własnych upodobań */
  text-align: center;
  z-index: 3;           /* Większy niż z-index przycisku, żeby był widoczny */
}