#wind_plan{
	    width:  100%; 
        height:  100%; 
		 margin: 0px ;
		border: 0px solid #777;
		position: absolute;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 0px;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		user-select: none;
		cursor: grab;
		position: fixed;   
	   	z-index: 5000;
		/* Центрирование */
		top: 50%;
		left: 50%; 
		transform: translate(-50%, -50%); 
		transition: opacity 0.4s ease, visibility 0.4s ease; 
		
		/* Скрыто по умолчанию */
		opacity: 0;
		visibility: hidden;
	   
   }
   

  
  	#wind_plan.active { 
		opacity: 1;
		visibility: visible;
	}
  
  #plan-container {
		width: 100%; /* 20px с каждой стороны */
		height:  100%; 
		margin: 0px ; 
		position: absolute;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.0);
		border-radius: 0px; 
		user-select: none;
		cursor: grab;
		position: fixed;   
		/* Центрирование */
		top: 50%;
		left: 50%; 
		transform: translate(-50%, -50%);  
		z-index: 5000;
	} 
 
	#plan-container.active { 
		opacity: 1;
		visibility: visible;
	}
		
		
		
		
		
		
		
		
	.text_pl{ 
		position: absolute; 
		margin-left: 30px; 
		margin-top: 20px;
		padding: 7px 20px;
		z-index: 7000; 	
		background: rgba(0, 0, 0, 0.3);
		border-radius: 24px; 
		border: 0px solid #e0e0e0;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}
	
 
		
	#zoomable {
		position: absolute;
		top: 0; left: 0;
		margin:0px;
		width: 100%;
		height: 100%;
		transform-origin: 0 0;
		opacity: 1; 
		transition: transform 0.1s ease, opacity 0.5s ease !important;
		pointer-events: auto;
		z-index: 5100;
	}   
	#zoomable.hidden {
		opacity: 0;
	} 
 
 
	.plan-image {
		width: 100%;
		height: 100%;
		display: block;
		pointer-events: none;
		object-fit: contain;
	} 

	/* Скрываем битое изображение */
	.plan-image[src=""], 
	.plan-image:not([src]), 
	.plan-image[src^="data:"][src*=";base64,"]:not([src*="image/"]) {
		visibility: hidden;
		opacity: 0;
	}


	.plan-overlay {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

   .apartment {
		--base-fill: rgba(100, 100, 100, 0.2); /* по умолчанию */
		fill: var(--base-fill);
		stroke: #fff;
		stroke-width: 1;
		cursor: pointer;
		pointer-events: auto;
		transition: fill 0.25s ease;
	}

	.apartment:hover {
	  --hover-alpha: 0.7; /* или 0.8 */
	  fill: color-mix(in srgb, var(--base-fill), transparent calc(100% - (var(--hover-alpha) * 100%)));
	/* Пример: усилить яркость */
	} 





	/* ------------------     блок с информацией  ---------------------------------  */
	
	.inf-block {
		position: absolute; 
		//display: flex; 
		background: rgba(0, 0, 0, 0.7);
		border-radius: 10px; 
		border: 0px solid #e0e0e0;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		max-width: 400px;
		//width: 200px;
		//height: 100px; 
		//margin-top: 10px;   
		padding: 0px 20px;
		/* Позиционирование снизу по центру */ 
		top: 30px;
		left: 50%;
		transform: translate(-50%, 0%);
		//margin: 0 auto;
		z-index: 6000;  
		pointer-events: none;
		white-space: nowrap; /* если хотите гарантированно запретить переносы */
	}
	
	.inf-block strong {
		color: #00D2A8;
		
	}
 

	/* ------------------     кнопки панели плана + - сброс  ---------------------------------  */
	.controls {
		text-align: center;
		margin: 5px 0;  
		position: absolute; 
		z-index: 6000; /* Должен быть выше чем у zoomable */
		background: rgba(255, 255, 255, 0.5);
		padding: 10px;
		border-radius: 15px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.2);
		
		bottom: 10px;
		left: 50%;
		transform: translate(-50%, 0%);
	}

	button {
		margin: 5px;
		padding: 8px 14px;
		font-size: 16px;
		cursor: pointer;
		border-radius: 15px;
	}
	
	#close_plan {
		position: absolute;
		width: 60px;
		height: 60px;
		top: 20px;
		right: 20px;
		margin: 0; 
		border: none;
		border-radius: 30px;
		background-color: rgba(100, 100, 100, 0.3);
		padding: 2px;
		opacity:0.5;
		transition: opacity 0.25s ease,  background-color 0.2s ease;;
 
		z-index: 6000; 
		 cursor: pointer;
		 /* Центрирование содержимого */
		display: flex;
		justify-content: center;
		align-items: center;
	} 
		 
		
	#close_plan:hover {
		opacity:1;
		background-color: rgba(100, 100, 100, 0.8);
	}
		
		
		
		
		
		
	/* ------------------    блок стрелкок переключения планов ---------------------------------  */ 
		
	.navigation-block {
		position: absolute; 
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 50px; 
		border: 0px solid #e0e0e0;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		max-width: 400px;
		width: 200px;
		//height: 100px; 
		margin-bottom: 10px;   
		padding: 5px 5px;
		/* Позиционирование снизу по центру */ 
		bottom: 10px;
		left: 50%;
		transform: translate(-50%, 0%);
		//margin: 0 auto;
		z-index: 6000;
		
 
	}

	.arrow-btn {
		width: 60px;
		height: 60px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 2px;
		margin: 0;
		border-radius: 30px;
		transition: background-color 0.2s ease;
		
		/* Центрирование содержимого */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.arrow-btn:hover {
		background-color: rgba(100, 100, 100, 0.5);
		 
	}

	.arrow-btn img {
		width: 22px;
		//height: 24px;
		display: block;
	}
	
	.arrow-btn:disabled {
		opacity: 0.3;
		cursor: not-allowed;
		pointer-events: none; /* отключает клик */
	}

	.text-content {
		flex-grow: 1;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
		color: #fff;
		padding: 0 16px;
	}
	
	
	
	/* **********    Для мобилы  *************     */
	
	@media (max-width: 1024px) {
		#wind_plan {
			width:  100%; 
			height: 100%; 
			border-radius: 0px;
		}
		
		#plan-container {
			width:  100%; 
			height:  100%;
		}
		#close_plan { 
			background: rgba(50, 50, 50, 0.4);
			width: 50px;
			height: 50px;  
			border-radius: 25px;
				 
		} 
		
		.arrow-btn {
			width: 40px;
			height: 40px; 
			border-radius: 20px; 
		}
		.arrow-btn img {
			width: 15px; 
		}
		
		.text_pl {
			margin-left: 5px;     /* Уменьшаем отступы */
			margin-top: 5px;      /* Уменьшаем отступ сверху */
			padding: 5px 10px;     /* Уменьшаем внутренние отступы */
			border-radius: 16px;   /* Меньшее скругление */
			font-size: 14px;       /* Меньший размер текста */
		}
		
		.navigation-block { 
			margin-bottom: 5px;  
			bottom: 5px;  
		}
	
	
		.inf-block { 
			max-width: 400px; 
			padding: 0px 20px; 
			top: 5px;  
		}
		
		.inf-block p {
			font-size: 14px; 
			padding: 0px;
			margin: 8px
		}
	}