/*
 * campaign_blackfriday.css — обликът на Черния петък върху общия css/campaign.css
 * ---------------------------------------------------------------------------
 * Зарежда се от index.php за /campaign/blackfriday, СЛЕД campaign.css.
 * Цветовете са тези от 2025 (тъмен фон, тюркоаз); плюс банерите и екранът за зареждане.
 */

:root{
	/* К2б: палитрата на прототипа на Кирил (template.html:8-19) */
	--bf-ink: #0a0f1f;
	--bf-panel: #131b35;
	--bf-panel-2: #1b2547;
	--bf-line: #2a3768;
	--bf-text: #eef1fb;
	--bf-muted: #9ba6c9;
	--bf-hot: #ff7a1a;
	--bf-hot-2: #ffb347;
	--bf-sea: #3fd3e2;
	--bf-good: #58d68d;
	
	--cmp-page-bg: var(--bf-ink);
	--cmp-sticky-shadow: #0f0f0f;
	--cmp-accent: #00dbe6;
	--cmp-accent-active: #00f2ff;
	--cmp-accent-hover: #930093;
	--cmp-nav-text: #FFF;
	--cmp-mob-bg: #222222;
	--cmp-mob-border: #2d2d2d;
	--cmp-mob-text: #FFF;
	--cmp-glow-strong: rgb(0 157 217 / 70%);
	--cmp-glow: rgb(0 157 217 / 50%);
	--cmp-card-bg: #484848;
	--cmp-card-info-bg: #3d3d3d;
	--cmp-card-title: #f9f9f9;
	--cmp-card-subtitle: #b9b9b9;
	--cmp-card-text: #fff;
	--cmp-highlight-bg: #6e6e6e;
	--cmp-highlight-text: #00dbe6;
	--cmp-expiration: #b8b8b8;
	--cmp-slider-btn: #009dd942;
	
	/* кубовете (css/campaign_cubes.css) */
	--cc-ink: var(--bf-ink);
	--cc-panel: var(--bf-panel);
	--cc-panel-2: var(--bf-panel-2);
	--cc-line: var(--bf-line);
	--cc-text: var(--bf-text);
	--cc-muted: var(--bf-muted);
	--cc-hot: var(--bf-hot);
	--cc-hot-ink: #1a0c00;
	--cc-hot-2: var(--bf-hot-2);
	--cc-sea: var(--bf-sea);
	--cc-sea-ink: #04262a;
	--cc-good: var(--bf-good);
	--cc-good-ink: #06240f;
	--cc-stars: var(--bf-hot-2);
	--cc-chip: transparent;
	--cc-chip-text: var(--bf-muted);
	--cc-chip-on: var(--bf-text);
	--cc-chip-on-text: var(--bf-ink);
	--cc-photo-text: var(--bf-text);
	--cc-photo-muted: var(--bf-muted);
}

/* чатът е светъл документ - без това наследява color-scheme: dark от :root и браузърът рисува бял квадрат под него (Кирил, #8, 16.10) */
#allinclusive-chat-iframe{color-scheme: normal;}

/* светла икона на календара в полето за дата (кубовете, campaign_cubes.js) - само там; на :root правеше черния текст бял навсякъде (бисквитките, менюто на профила) */
.cc-in-fd{color-scheme: dark;}

/* екранът при зареждане (#loadscreen от index.php, разметката не се сменя):
   небе и море в кутията, печатът BLACK 26 изгрява от морето озарен, около него се върти дъга.
   Всичко е с ::before/::after - кутията е .loadscreen-content, морето е нейният ::after,
   печатът е нейният ::before, дъгата е #loadscreen::before, текстът отдолу е #loadscreen::after */
#loadscreen{
	background: rgba(10,15,31,.85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	/* минимум 3000 ms на екрана - целият цикъл: fadeOut (~0,4 s) върви, докато печатът потъва (чете го index.php при document.ready) */
	--ls-min: 3000;
}

/* кутията: небето и светлината, която се вдига заедно с печата */
.loadscreen-content{
	width: 240px;
	height: 160px;
	overflow: hidden;
	border: 1px solid var(--bf-line);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,.45);
	background: radial-gradient(circle, rgba(255,179,71,.75) 0, rgba(255,122,26,.35) 35%, transparent 68%) 50% 260%/260px 260px no-repeat,
		linear-gradient(180deg, #131b35 0%, #2b2347 55%, #7a3a2a 100%);
	animation: bf-glow 3.4s ease-in-out infinite;
}

/* печатът BLACK 26 (като .cclub-bf в campaign_club.css) */
.loadscreen-content::before{
	content: "BLACK\A 26";
	position: absolute;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 88px;
	height: 88px;
	margin-left: -44px;
	border: 6px double var(--bf-hot);
	border-radius: 50%;
	background: #111;
	box-shadow: 0 0 0 2px #111, 0 0 24px 6px rgba(255,122,26,.6), 0 0 60px 18px rgba(255,179,71,.3);
	color: var(--bf-hot);
	font-family: "Unbounded", "Arial Black", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.05;
	white-space: pre;
	animation: bf-rise 3.4s ease-in-out infinite;
}

/* морето: над печата, вълните текат надясно */
.loadscreen-content::after{
	content: "";
	position: absolute;
	left: -60px;
	right: -60px;
	bottom: 0;
	z-index: 3;
	height: 44%;
	background: radial-gradient(circle at 30px -8px, transparent 22px, var(--bf-sea) 23px) 0 0/60px 30px repeat-x,
		linear-gradient(180deg, var(--bf-sea), #0f6f8a 60%, #0a3a5a);
	animation: bf-waves 1.6s linear infinite;
}

/* дъгата: над мястото, където печатът спира - 35vh (padding-top от loadscreen.css) + 17px - 14px (печатът стои на 16px в кутия с рамка 1px).
   Ако се смени височината на кутията или печата, сменя се и top */
#loadscreen::before{
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	top: calc(35vh + 3px);
	box-sizing: border-box;
	width: 116px;
	height: 116px;
	margin-left: -58px;
	border: 3px solid transparent;
	border-top-color: var(--bf-hot-2);
	border-right-color: var(--bf-hot-2);
	border-radius: 50%;
	filter: drop-shadow(0 0 6px rgba(255,179,71,.8));
	animation: bf-spin 1.2s linear infinite, bf-arc 3.4s ease-in-out infinite;
}

/* "Зареждаме оферти…" - с кодове, за да не зависи от кодирането, с което браузърът чете css-а; \20 е интервалът */
#loadscreen::after{
	content: "\417\430\440\435\436\434\430\43C\435\20\43E\444\435\440\442\438\2026";
	display: block;
	margin-top: 18px;
	color: var(--bf-text);
	font-family: "Unbounded", "Arial Black", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	text-shadow: 0 0 14px rgba(255,122,26,.45);
}

@keyframes bf-rise{
	0%{bottom: -95px; transform: rotate(-30deg);}
	45%, 82%{bottom: 54px; transform: rotate(-12deg);}
	100%{bottom: -95px; transform: rotate(-30deg);}
}
@keyframes bf-glow{
	0%, 100%{background-position: 50% 260%, 0 0;}
	45%, 82%{background-position: 50% 25%, 0 0;}
}
@keyframes bf-waves{
	to{transform: translateX(60px);}
}
@keyframes bf-spin{
	to{transform: rotate(360deg);}
}
@keyframes bf-arc{
	0%, 40%{opacity: 0;}
	50%, 80%{opacity: 1;}
	88%, 100%{opacity: 0;}
}

/* без движение: печатът стои горе, дъгата стои около него */
@media (prefers-reduced-motion: reduce){
	#loadscreen{
		--ls-min: 0;
	}
	.loadscreen-content, .loadscreen-content::before, .loadscreen-content::after, #loadscreen::before{
		animation: none;
	}
	.loadscreen-content{
		background-position: 50% 25%, 0 0;
	}
	.loadscreen-content::before{
		bottom: 54px;
		transform: rotate(-12deg);
	}
	#loadscreen::before{
		opacity: 1;
		transform: rotate(45deg);
	}
}

/* банерите: размерите са в campaign.css, тук са картинките */
.tbi-banner{
	display: flex;
}

.tbi-banner-wrap{
	background-image: url('../images/tbi-banner-d-2free.png');
}

.bf-banner-wrap{
	display: block;
	background-image: url('../images/bf_banner2.png');
}

/* К2б: тъмен хедър на сайта - на цялата страница на Черния петък (селекторите са от css/header_new.css; файлът
   се зарежда само тук). Падащите менюта (.drop-container) остават светли. Логото - светлата версия (виж по-долу). */
.site-head-wrap{
	background-color: var(--bf-ink);
	box-shadow: 0px 1px 8px -3px var(--cmp-sticky-shadow);
}

/* #8: логото на тъмния фон - без бялата подложка; надписът е бял (images/logo_light_bf.png), слънцето и вълните - оригиналните.
   Картинката се подменя с фон: img-ът остава в HTML-а (alt, линкът), а своя src избутва извън кутията с padding.
   Размерите са като в css/header_new.css (120px, до 600px - 100px), височината - по пропорцията 170:130. */
.site-head-wrap .site-logo>img{
	box-sizing: border-box;
	width: 120px;
	height: 92px;
	padding: 0 0 0 120px;
	background: url("../images/logo_light_bf.png") no-repeat center / contain;
	border-radius: 0;
	filter: drop-shadow(0 0 10px rgba(255,179,71,.28));
}
@media screen and (max-width: 600px){
	.site-head-wrap .site-logo>img{
		width: 100px;
		height: 77px;
		padding-left: 100px;
	}
}

.site-head-wrap .site-logo-sub-text{
	color: var(--bf-muted);
	border-left-color: var(--bf-line);
}

.site-head-wrap .site-header .main-header-link, .site-head-wrap .site-header .main-header-link-g{
	color: var(--bf-text);
}

.site-head-wrap .site-header .main-header-link:hover, .site-head-wrap .site-header .main-header-link-g:hover{
	color: var(--cmp-accent);
}

/* К2б: H1 като в прототипа на Кирил; текстът е от админа - цветна дума само ако там има <em> */
.campaign-page-head{
	font-family: "Unbounded", "Arial Black", system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--bf-text);
	padding: 18px 10px 18px;
	margin: 0;
	box-shadow: none;
	text-wrap: balance;
}

.campaign-page-head em{
	font-style: normal;
	color: var(--bf-hot);
}
/* #8 SEO: уводният текст на тъмния фон */
.campaign-intro{
	font-family: "Onest", "Segoe UI", system-ui, sans-serif;
	color: var(--bf-text);
}

/* К2б: кубовете - палитрата и шрифтовете на прототипа (променливите --cc-* са в css/campaign_cubes.css) */
.cc-nav, .cc-card{
	font-family: "Onest", "Segoe UI", system-ui, sans-serif;
}

h2.category-name, .cc-name, .cc-price b, .cc-big, .cc-badge.cc-d{
	font-family: "Unbounded", "Arial Black", system-ui, sans-serif;
}

.cc-name{
	font-weight: 700;
}

/* заглавията на категориите в кубовия изглед (h2; старият изглед е с h3 и не се пипа) */
h2.category-name{
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--bf-text);
	background: transparent;
	box-shadow: none;
	padding: 10px 0;
	margin: 30px 0 16px 0;
}

/* #8: бутонът „към сайта" - контурно хапче като лентата с категориите; оранжевото остава за главните действия */
.home-btn-wrap{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid var(--bf-line);
	border-radius: 999px;
	color: var(--bf-text);
	font-family: "Onest", "Segoe UI", system-ui, sans-serif;
	font-weight: 600;
	padding: 8px 16px;
}
.home-btn-wrap i{
	color: var(--bf-hot);
}
.home-btn-wrap:hover{
	background: var(--bf-panel-2);
	border-color: var(--bf-hot);
	color: var(--bf-text);
}