/**
 * CCC — оформление Fancybox 5 как Siena main-gallery (светлый chrome).
 * Без правой панели / EXIF / share / like. Vendor fancybox.css не трогаем.
 * Токены: docs/ru/32-palette.md
 */

:root {
	--f-thumb-outline-color: var(--ccc-action);
	--f-carousel-theme-color: var(--ccc-action);
	--f-progress-color: var(--ccc-action-soft);
}

/* ===== Светлая галерея (референс Siena stories) ===== */
.fancybox__container.ccc-gallery {
	--fancybox-color: var(--ccc-text);
	--fancybox-hover-color: var(--ccc-text);
	--fancybox-bg: var(--ccc-surface);
	--f-spinner-color-1: color-mix(in srgb, var(--ccc-text) 12%, transparent);
	--f-spinner-color-2: var(--ccc-text-muted);
	border-top: 1px solid var(--ccc-border);
}

/* Тулбар: матовая белая полоса сверху */
.ccc-gallery .fancybox__toolbar {
	position: relative;
	padding: 0;
	background: color-mix(in srgb, var(--ccc-surface) 80%, transparent);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	border-bottom: 1px solid var(--ccc-border);
	text-shadow: none;
	font-weight: 400;
	--f-button-width: 42px;
	--f-button-height: 42px;
	--f-button-color: var(--ccc-text);
	--f-button-hover-color: var(--ccc-text);
	--f-button-bg: transparent;
	/* Без подсветки колонок/кнопок тулбара на hover/active/focus */
	--f-button-hover-bg: transparent;
	--f-button-active-bg: transparent;
	--f-button-svg-width: 22px;
	--f-button-svg-height: 22px;
	--f-button-svg-stroke-width: 1.75;
	--f-button-svg-filter: none;
	--f-progress-color: var(--ccc-action-soft);
}

.ccc-gallery .fancybox__toolbar__column .f-button:hover:not([disabled]),
.ccc-gallery .fancybox__toolbar__column .f-button:active:not([disabled]),
.ccc-gallery .fancybox__toolbar__column .f-button:focus-visible {
	color: var(--ccc-text);
	background-color: transparent;
	box-shadow: none;
	outline: none;
}

.ccc-gallery .fancybox__infobar {
	color: var(--ccc-text);
	opacity: 0.9;
	font-size: 14px;
	padding: 0 8px;
}

/* Стрелки по бокам — серые скруглённые плашки как в Сиене */
.ccc-gallery .fancybox__nav {
	--f-button-width: 48px;
	--f-button-height: 48px;
	--f-button-color: var(--ccc-text);
	--f-button-bg: var(--ccc-disabled-bg);
	--f-button-hover-bg: var(--ccc-border);
	--f-button-active-bg: var(--ccc-border);
	--f-button-border-radius: 6px;
	--f-button-svg-width: 20px;
	--f-button-svg-height: 20px;
	--f-button-svg-stroke-width: 2.5;
	--f-button-svg-filter: none;
	--f-button-shadow: none;
}

.ccc-gallery .fancybox__slide {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Полоска превью снизу */
.ccc-gallery .fancybox__thumbs {
	--f-thumb-width: 96px;
	--f-thumb-height: 72px;
	--f-thumb-border-radius: 2px;
	--f-thumb-outline: 2px;
	--f-thumb-outline-color: var(--ccc-action);
	--f-thumb-gap: 8px;
	--f-thumb-opacity: 0.55;
	--f-thumb-hover-opacity: 0.85;
	--f-thumb-selected-opacity: 1;
	background: var(--ccc-surface);
	border-top: 1px solid var(--ccc-border);
}

/* Явно прячем то, чего в CCC нет (если когда-то попадёт в разметку) */
.ccc-gallery .fancybox__button--toggleRight_panel,
.ccc-gallery .fancybox__rightCol,
.ccc-gallery .js-shareImageCode,
.ccc-gallery .share_div,
.ccc-gallery .likeButton,
.ccc-gallery .all_exif {
	display: none !important;
}