/* BEGIN */

html, body {
    overflow-x: clip !important; /* Модерният заместител на hidden, който НЕ чупи sticky */
}

/* END */





/* custom from .alert and .alert-info > */

.longlabel-at {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #000000;
  /*! background-color: rgb(245, 245, 245); */
  background-color: #0ae;
  border-color: #3a3a3a;
  }
  
 
.well-at {
  color: #202124;			
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  margin-top: 20px;
  background-color: #0ae;
  /* border: 1px solid #e3e3e3; */
  border-radius: 4px;
  
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

 
    
.katbprice, .katbfullprice, .katbspecprice, .pointsprice, .pravaprice, .refreshprice { 
 display: inline-block;
 }
 
 
 .linethrough {
	
	text-decoration: line-through; 
 }
 
 .inline-at {
	display: inline-block;	 
 }
 
 /*christmas text*/
 
.christmas-text {
  font-family: "Arial", sans-serif;
  color: #ff0000; /* Red */
  text-shadow: 2px 1px 3px #FFFFFF;
}
		 
/*logo*/

.baner-container {

	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	
	
	
}


.baner-tag {

	position: relative;
	top: 10px;
	left: 10px;
	display: inline-block;
	z-index: 30;
		
}


hr.cardcont {
  
	margin-top: 3px;
	margin-bottom: 3px;
	border: 0;
	border-top: 1px solid #3a3a3a;
  
}



/* =========================================================
   CAROUSEL HEIGHT (Контрол на височината - FLUID)
   ========================================================= */

/* 1. БАЗОВО ПРАВИЛО ЗА ТЕЛЕФОНИ (Под 768px) */
/* Тук правим слайдера да се променя спрямо ВИСОЧИНАТА на екрана (vh) */
#myCarousel, 
.carousel-inner, 
.item, 
.fill {
    /* 70vh означава: "Винаги заемай 70% от височината на екрана" */
    /* Така при въртене (хоризонтално) той сам ще се свие пропорционално */
    height: 50vh !important; 
    
    /* Ограничения, за да не стане твърде малък или твърде голям на телефона */
    /* Сваляме и минималната височина. Колкото е по-ниска тя, толкова по-малко "зумната" ще е снимката.  */
    min-height: 250px !important; 
    max-height: 400px !important; 
}

/* 2. Базови правила за снимките (за всички екрани) */
.fill {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 3. ТАБЛЕТИ (Портретен режим - над 768px) */
@media (min-width: 768px) {
    #myCarousel, .carousel-inner, .item, .fill {
        height: 370px !important; /* Връщаме се на твърди пиксели за по-големи екрани */
        max-height: none !important; /* Махаме ограничението от телефона */
    }
}

/* 4. ТАБЛЕТИ (Хоризонтални) и МАЛКИ ЛАПТОПИ (над 992px) */
@media (min-width: 992px) {
    #myCarousel, .carousel-inner, .item, .fill {
        height: 450px !important; 
    }
}

/* 5. ГОЛЕМИ МОНИТОРИ И ДЕСКТОП (над 1200px) */
@media (min-width: 1200px) {
    #myCarousel, .carousel-inner, .item, .fill {
        height: 650px !important; 
    }
}


/* CAROUSEL CAPTIONS */

/* =========================================================
   FLUID CAROUSEL CAPTIONS (Плавни послания)
   ========================================================= */
.carousel-caption {
    bottom: 15%; /* Една позиция за всички екрани */
    z-index: 10;
}

.carousel-caption p {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    margin-bottom: 0;
    text-shadow: 2px 2px 4px #000000, 0px 0px 10px rgba(0,0,0,0.8) !important;
    
    /* МАГИЯТА ЗА ТЕКСТА (Fluid Typography): */
    font-size: 4vw !important; /* Резервен вариант за много стари браузъри */
    
    /* 
       clamp(МИН_РАЗМЕР, ПЛАВЕН_РАЗМЕР, МАКС_РАЗМЕР)
       Минимум: 22px (за телефон)
       Плавно: 4% от ширината на екрана (4vw)
       Максимум: 56px (за голям монитор)
    */
    
    font-size: clamp(25px, 4vw, 50px) !important; 
    
    letter-spacing: 1px;
}




/* =========================================================
   LOGO OVERLAY (С пълен контрол върху базовия размер)
   ========================================================= */
.logo-tag {
    position: absolute; 
    top: 5%; 
    left: 5%;
    z-index: 999; 
}

.logo-tag img {
    /* 1. БАЗОВИЯТ (МАКСИМАЛЕН) РАЗМЕР ЗА ДЕСКТОП */
    max-width: 180px; 
    
    /* 2. ТЕМПОТО НА СМАЛЯВАНЕ (Вече използваме VMIN!) */
    /* Това гарантира, че логото няма да експлодира в хоризонтален режим */
    width: 25vmin; 

    /* 3. МИНИМАЛНИЯТ РАЗМЕР ЗА ТЕЛЕФОНИ */
    /* Сваляме дъното на 80px. Така логото може спокойно да се смали 
       дори на много стар и тесен телефон, без да изглежда огромно. */
    min-width: 80px; 
    
    height: auto; 
    opacity: 1; 
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}



/* =========================================================
   GALLERY (С пълен контрол върху базовия размер)
   ========================================================= */

/* Правим всички снимки в галерията еднакви по размер */
.gallery-img {
    width: 100%;
    height: 250px; /* Можеш да промениш височината по твой вкус */
    object-fit: cover; /* Това е магията - изрязва снимката, за да запълни кутията, без да я разтяга */
    cursor: pointer;
}

/* Оправяме разстоянието между редовете */
.img-portfolio {
    margin-bottom: 30px;
}



/* =====================================================================
STICKY - MARCH-2026
===================================================================== */


/* Плейсхолдърът пази мястото, за да не подскача сайта, когато елементът се залепи */
.sticky-placeholder {
    display: block;
    width: 100%;
}

/* Това е класът, който се добавя АВТОМАТИЧНО, когато елементът удари навигацията */
.is-smart-stuck {
    position: fixed !important;
    left: 0;
    width: 100% !important;
    z-index: 1020;
    
    /* Модерен ефект */
    background: rgba(0, 170, 238, 0.082);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); */
    border-bottom: 1px solid rgba(0,0,0,0.05);
    
    /* Плавен преход */
    animation: slideDown 0.3s ease-out;
}

/* Центрираме съдържанието, когато е залепено, за да изглежда добре на цял екран */
.is-smart-stuck > div {
    max-width: 1140px; /* Ширината на твоя Bootstrap container */
    margin: 0 auto;
    padding: 10px 15px;
    text-align: center;
}

@keyframes slideDown {
    from { transform: translateY(-10px); opacity: 0.9; }
    to { transform: translateY(0); opacity: 1; }
}



/* =====================================================================
END ---- STICKY - MARCH-2026
===================================================================== */