/*
 * campaign.css — ОБЩИЯТ облик на кампанийния лендинг /campaign/X (form_campaign_landing.php)
 * ---------------------------------------------------------------------------
 * Зарежда се от index.php за всяка кампания. Цветовете са променливи (--cmp-*) със
 * стойности по подразбиране от стила на сайта (css/landing_new.css): бял фон, синьо
 * #265e94, оранжеви бутони. Банерите са скрити по подразбиране.
 *
 * Облик на отделна кампания: файл css/campaign_<URL_Keyword>.css (напр.
 * campaign_blackfriday.css) — index.php го зарежда сам СЛЕД този файл, ако съществува.
 * В него се сменят променливите в :root, показват се банерите, и при нужда се пише
 * всяко друго правило. Този файл не се пипа заради отделна кампания.
 */

:root{
	--cmp-page-bg: #fff;                        /* фон на страницата */
	--cmp-sticky-shadow: rgba(0, 0, 0, 0.12);   /* сянка под залепената лента */
	--cmp-accent: #265e94;                      /* лента, заглавия, етикети, бутон „към сайта" */
	--cmp-accent-active: #2871b7;               /* активна / посочена категория */
	--cmp-accent-hover: #e67600;                /* бутон „към сайта" при посочване */
	--cmp-nav-text: #fff;                       /* текст и икони върху акцента */
	--cmp-mob-bg: #fafafa;                      /* категория на телефон */
	--cmp-mob-border: #ececec;
	--cmp-mob-text: #265e94;
	--cmp-glow-strong: rgb(38 94 148 / 40%);    /* сянка на заглавието на секцията */
	--cmp-glow: rgba(0, 0, 0, 0.12);            /* сянка на картата при посочване */
	--cmp-card-bg: #fafafa;                     /* карта на хотел */
	--cmp-card-info-bg: #fafafa;                /* име и град в картата */
	--cmp-card-title: #265e94;
	--cmp-card-subtitle: #707070;
	--cmp-card-text: #333;                      /* борд, отстъпки, цена */
	--cmp-highlight-bg: #fff;                   /* подчертан текст в картата (-30%, цена) */
	--cmp-highlight-text: #265e94;
	--cmp-expiration: #707070;                  /* „важи до" */
	--cmp-slider-btn: rgb(38 94 148 / 26%);     /* стрелките на лентата */
}
html{
	scroll-behavior: smooth;
}

body{
	background: var(--cmp-page-bg);
}

.hotel-grid{
	scroll-margin-top: 120px;
}

.head-nav-wrap{
	display: none;
}

.sticky-cat-grid{
	position: sticky;
	top: 0;
	box-shadow: 0px 4px 8px var(--cmp-sticky-shadow);
}

.cat-wrapper{
    background-color: var(--cmp-accent);
	z-index: 2;
}

.cat-wrapper::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 0;
}


.cat-wrap{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
	padding: 10px 20px;
}

.mob-cat-wrap{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
	padding: 0;
}

.cat-elem{
	flex-basis: 33%;
	flex-grow: 1;
	color: var(--cmp-nav-text);
	line-height: 1.5;
	font-size: 14px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.4s ease;
}

.mob-cat-elem {
    flex-basis: 33%;
    flex-grow: 1;
    color: var(--cmp-mob-text);
    line-height: 1.5;
    background: var(--cmp-mob-bg);
    border: 1px solid var(--cmp-mob-border);
    font-size: 14px;
	border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.cat-active{
	box-shadow: -3px -3px 10px 0px rgba(255, 255, 255, 0.2), 3px 3px 10px -5px rgba(0, 0, 0, .2);
	background: var(--cmp-accent-active);
}

.cat-elem a{
	display: block;
    color: var(--cmp-nav-text);
	padding: 14px;
}

.mob-cat-elem a{
	color: var(--cmp-mob-text);
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.mob-cat-elem .cat-elem-icon {
    font-size: 20px;
    height: 40px;
    width: 40px;
    border-radius: 25%;
    background: var(--cmp-accent);
    color: var(--cmp-nav-text);
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper-centered{
	padding: 10px 0;
	background: var(--cmp-page-bg);
}

.banner-wrap{
	display: flex;
    margin: 0 0 5px 0;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.home-btn-wrap{
	background: var(--cmp-accent);
    border-radius: 4px; 
	color: #fff;
    padding: 8px 10px;
    font-size: 14px;
    margin: 0px 10px 0px 0px;
	white-space: nowrap;
}

.home-btn-wrap:hover{
	background: var(--cmp-accent-hover);
	color: #fff;
}

.tbi-banner{
    width: 100%;
    height: 170px;
    display: none;
    align-items: center;
    background: #ff6600;
    border-radius: 4px;
    margin: 0 0px 0px 5px;
}

.tbi-banner-wrap{
	background-size: 100% 100%;
	width: 100%;
	color: #fff;
	height: 55px;
	border-radius: 4px;
}

.bf-banner-wrap{
	display: none;
	background-size: 100% 100%;
	width: 100%;
	height: 170px;
	margin: 0 10px 0 0;
	border-radius: 4px;
}

.eon-banner-wrap{
	background: purple;
	color: #fff;
	height: 40px;
	border-radius: 4px;
}

.category-name{
	font-size: 18px;
	font-weight: 600;
	padding: 10px;
	margin: 15px 0 10px 0;
	background: #fff;
	color: var(--cmp-accent);
	border-radius: 4px;
	box-shadow: var(--cmp-glow-strong) 0px 4px 12px;
}

.citems-wrapper, .banners-wrapper{
	max-width: 80%;
}

.hotel-citem{
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    float: left;
    margin: 10px 5px 20px 5px;
    height: 400px;
	border-radius: 4px;
    text-align: center;
	background: var(--cmp-card-bg);
	transition: all 0.4s ease;
}

.hotel-citem:hover{
	transition: all 0.4s ease;
	box-shadow: var(--cmp-glow) 0px 4px 10px;
	transform: translateY(-2px);
}

.hotel-citem:hover .hotel-info-name {
    text-decoration: underline;
}

.hotel-citem:hover .hotel-img-src {
    transform: scale(1.1);
}

.hotel-grid-items{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: auto;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-auto-flow: dense;
}

.article-content{
	overflow: hidden;
    display: flex;
    flex-direction: column;
	height: 100%;
}

.article-content-middle{
	overflow: hidden;
    display: flex;
    flex-direction: column;
	height: 100%;
	justify-content: center;
}

.coming-soon-row{
	background: #eecf53;
	padding: 10px;
	font-size: 16px;
}

.hotel-info-wrap{
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
}

.hotel-img-wrap{
	overflow: hidden;
	max-height: 160px;
	border-radius: 4px 4px 0 0;
	position: relative;
}

.hotel-link-wrap{
	margin: auto 0 5px 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-evenly;
}

.hotel-view-btn{
	padding: 6px 8px;
	font-size: 16px;
	color: #fff;
	background: #fda54e;
	border-radius: 4px;
	transition: all 0.4s ease;
}

.hotel-view-btn:hover{
    background: #f09943;
    box-shadow: rgb(253 165 78 / 60%) 0px 3px 10px -2px;
}

.hotel-view-btn-soon{
	color: #707070;
	background: #eecf53;
}

.hotel-view-btn-soon:hover{
    background: #eecf53;
	box-shadow: none;
}


.hotel-img-right-vertical-icons{
	position: absolute;
    top: 0;
    right: 0;
	height: 100%;
    display: flex;
    flex-direction: column;
	background: #0000003b;
	padding: 0 4px;
}

.hotel-img-right-vertical-icons>div{
	margin: 4px 0 0;
}

.hotel-img-left-vertical-icons{
	position: absolute;
    top: 0;
    left: 0;
	height: 100%;
    display: flex;
    flex-direction: column;
	padding: 0 4px 0 0;
}

.hotel-img-left-vertical-icons>div{
	margin: 4px 0 0;
}

.hotel-img-label-left{
	padding: 3px 9px;
    border-radius: 0 0 4px 0;
    background-color: var(--cmp-accent);
    color: #FFF;
    line-height: 1.5;
    font-size: 12px;
	font-weight: 600;
}

.hotel-img-rating-icon{
	padding: 2px;
    border-radius: 4px;
    background-color: #009DD9;
    color: #FFF;
    line-height: 1.5;
    font-size: 14px;
}

.hotel-img-star-icon{
	padding: 2px;
    border-radius: 4px;
    background-color: #fff;
    color: #d96a00;
    line-height: 1.5;
    font-size: 14px;
}

.hotel-img-tbi-icon{
    border-radius: 4px;
    background-color: #000;
    line-height: 1.5;
    font-size: 14px;
}

.hotel-img-src{
	width: 100%;
	border-radius: 4px 4px 0 0;
	transition: transform 0.4s ease;
}

.hotel-info-name{
	font-size: 18px;
    color: var(--cmp-card-title);
    text-align: left;
    padding: 4px 2px 0 2px;
	background: var(--cmp-card-info-bg);
}

.hotel-name-link{
	width: 100%;
}

.hotel-info-name .hotel-name{
	font-size: 18px;
	height: 40px;
	overflow: hidden;
}

.hotel-info-city{
	font-size: 14px;
    color: var(--cmp-card-subtitle);
    text-align: left;
    padding: 0 0 4px 2px;
	background: var(--cmp-card-info-bg);
}

.hotel-info-board, .hotel-info-discount, .hotel-info-calculation, .hotel-info-facilities{
    text-align: left;
	font-size: 12px;
    padding: 0 0 4px 2px;
	color: var(--cmp-card-text);
	line-height: 1.5;
}

.hotel-info-text-highlight{
    padding: 2px 4px;
    font-weight: 501;
    border-radius: 4px;
    background: var(--cmp-highlight-bg);
    color: var(--cmp-highlight-text);
}

.hotel-info-text-highlight span{
    margin: 0 2px 0 0;
}

.hotel-info-facilities{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.hotel-info-facilities .hotel-info-text-highlight{
	display: flex;
    margin: 1px 1px 0 0;
    padding: 2px 4px;
    line-height: 1;
    flex-direction: row;
    flex-wrap: wrap;
}

.offer-expiration{
    padding: 2px;
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
    /* background: #b8b8b8; */
    color: var(--cmp-expiration);
}

.sticky-cat-grid .cat-elem-icon{
	display: none;
}

.waterpark-icon{
	background: url(../img/water-park-icon-w.png);
	background-size: contain;
    height: 25px;
    width: 40px;
}

/*tiny slider*/

.tns-outer{
	position: relative;
}

.tns-controls{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.tns-controls button{
	z-index: 3;
	background: var(--cmp-slider-btn);
	border: none;
	color: #fff;
	padding: 0 5px;
}

.tns-controls button:disabled{
    color: #dadada;
}
		
@media screen and (max-width: 600px) {
	
	.tbi-banner{
		width: 100%;
		height: 40px;
		align-items: center;
		background: #ff6600;
		border-radius: 4px;
		margin: 5px 0px 0px 0px;
	}
	
	.tbi-banner-wrap{
		height: 40px;
	}
	
	.bf-banner-wrap{
		background-size: 100% 100%;
		width: 100%;
		height: 100px;
		margin: 0 0 0 0;
		border-radius: 4px;
	}
	
	.banner-wrap {
		display: flex;
		margin: 0 0 10px 0;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.home-btn-wrap {
		margin: 0px 0px 10px 0px;
	}
	
	.hotel-grid{
		scroll-margin-top: 80px;
	}

	.cat-wrapper{
		overflow-x: scroll;
		height: 0;
	}
	/* 
	.tns-autowidth{
		display: flex!important;
	} */
	
	.sticky-cat-grid.cat-wrapper{
		display: block;
		height: auto;
		/* max-width: 100vw; nocarousel*/
	}
	
	.sticky-cat-grid .cat-wrap{
		flex-wrap: nowrap;
		/* max-width: 100vw; nocarousel*/
	}
	
	/* 
	.sticky-cat-grid .cat-wrap{
		display: inline-block!important;
	} */
	
	.cat-elem{
		white-space: nowrap;
	}
	
	.cat-elem a{
		display: block;
		color: var(--cmp-nav-text);
		padding: 14px;
	}
	
	.sticky-cat-grid {
		position: sticky;
		top: 0;
		left: 0;
	}
	
	.sticky-cat-grid::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 0;
    }
	
	.hotel-citem {
        width: auto;
        height: 380px;
        margin: 4px 1px;
    }
	
	.hotel-grid-items{
        grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
    }
	
	.citems-wrapper, .banners-wrapper{
		max-width: 98%;
	}
	
	.hotel-img-wrap{
		height: 120px;
	}
	
	.hotel-info-name{
		font-size: 16px;
	}

	.hotel-info-name .hotel-name{
		font-size: 16px;
		height: 37px;
		overflow: hidden;
	}

	.hotel-info-city{
		font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.5;
	}
	
	.hotel-view-btn{
		font-size: 14px;
	}
	
}

@media screen and (min-width: 600px) {
	
	.mob-cat-wrapper{
		display: none;
	} 
	
	.cat-elem:hover{
		box-shadow: -3px -3px 10px 0px rgba(255, 255, 255, 0.2), 3px 3px 10px -5px rgba(0, 0, 0, .2);
		background: var(--cmp-accent-active);
	}
	
	.cat-active:hover{
		box-shadow: -3px -3px 10px 0px rgba(255, 255, 255, 0.2), 3px 3px 10px -5px rgba(0, 0, 0, .2);
		background: var(--cmp-accent-active);
	}
	
	.cat-elem-icon{
		font-size: 25px;
	}
	
	.banner-wrap{
		position: relative;
	}
	
	.home-btn-wrap{
		position: absolute;
		right: 100%;
		top: 0;
	}
	
}






		
		

/* H1 на активната кампания: по-малко от .rlanding-page-head (2.7em) — на телефон да не заема екрана */
.campaign-page-head{
	font-size: 1.8em;
	padding: 10px 0;
	margin: 0;
}
@media (max-width: 768px){
	.campaign-page-head{
		font-size: 1.3em;
		padding: 8px 16px;
	}
}
/* #8 SEO: уводният текст под H1 (подзаглавието от админа) */
.campaign-intro{
	max-width: 900px;
	margin: 0 auto 16px;
	padding: 0 16px;
	font-size: 1.05em;
	line-height: 1.55;
	text-align: center;
}