/**
 * Thủy Bích Vĩnh Long — Shared Carousel Skin
 * File: css/tb-carousel.css
 *
 * Owner:
 * - Shared Flickity control skin: arrows, dots, minimal structure.
 * - Current adapters: Blog Hub latest slider and Blog Single related carousel.
 *
 * Not owner:
 * - Card sizing / page layout. Keep in page CSS.
 * - PDP gallery logic/dots. PDP keeps dots hidden in css/tb-pdp.css.
 *
 * Rule:
 * - No global .flickity-* selectors. Always scope by .tb-carousel or approved adapter.
 */

:root {
	--tb-carousel-arrow-size: 38px;
	--tb-carousel-arrow-inset: 12px;
	--tb-carousel-arrow-top: 50%;
	--tb-carousel-arrow-bg: rgba(255, 255, 255, .96);
	--tb-carousel-arrow-bg-hover: #f6f7f5;
	--tb-carousel-arrow-border: rgba(30, 35, 32, .10);
	--tb-carousel-arrow-border-hover: rgba(30, 35, 32, .18);
	--tb-carousel-arrow-color: var(--tb-text, #1e2320);
	--tb-carousel-arrow-radius: var(--tb-radius-md, 4px);
	--tb-carousel-dot-size: 6px;
	--tb-carousel-dot-active-width: 22px;
	--tb-carousel-dot-gap: 7px;
	--tb-carousel-dot-bg: rgba(30, 35, 32, .20);
	--tb-carousel-dot-active-bg: var(--tb-text, #1e2320);
	--tb-carousel-dots-margin-top: 18px;
}

/* Adapters: page files own layout; this file owns controls. */
.tbv-latest.flickity-enabled,
.tb-carousel--card {
	--tb-carousel-arrow-top: 34%;
}

.single-post .tb-related-single__grid.tb-carousel {
	--tb-carousel-arrow-inset: 10px;
	--tb-carousel-dots-margin-top: 20px;
}

/* Minimal Flickity structure, scoped to approved wrappers only. */
:where(.tb-carousel, .tbv-latest.flickity-enabled).flickity-enabled {
	position: relative !important;
	display: block !important;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-viewport {
	position: relative !important;
	width: 100% !important;
	overflow: hidden !important;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-slider {
	position: absolute !important;
	width: 100% !important;
	height: 100% !important;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled).flickity-enabled:focus {
	outline: 0;
}

/* Arrows */
:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-prev-next-button {
	position: absolute !important;
	z-index: 8 !important;
	top: var(--tb-carousel-arrow-top) !important;
	width: var(--tb-carousel-arrow-size) !important;
	height: var(--tb-carousel-arrow-size) !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid var(--tb-carousel-arrow-border) !important;
	border-radius: var(--tb-carousel-arrow-radius) !important;
	background: var(--tb-carousel-arrow-bg) !important;
	box-shadow: none !important;
	color: var(--tb-carousel-arrow-color) !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateY(-50%) !important;
	transition: background-color .16s ease, border-color .16s ease, opacity .16s ease;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-prev-next-button:is(:hover, :focus-visible) {
	background: var(--tb-carousel-arrow-bg-hover) !important;
	border-color: var(--tb-carousel-arrow-border-hover) !important;
	outline: 0 !important;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-prev-next-button:focus-visible {
	box-shadow: 0 0 0 2px rgba(169, 138, 94, .28) !important;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-prev-next-button:disabled {
	opacity: .38 !important;
	pointer-events: none !important;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-button-icon {
	display: none !important;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-prev-next-button::before {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font: 400 26px/1 Arial, sans-serif !important;
	transform: translateY(-1px);
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-prev-next-button.previous {
	left: var(--tb-carousel-arrow-inset) !important;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-prev-next-button.next {
	right: var(--tb-carousel-arrow-inset) !important;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-prev-next-button.previous::before {
	content: "‹";
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-prev-next-button.next::before {
	content: "›";
}

/* Dots */
:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-page-dots {
	position: relative !important;
	inset: auto 0 !important;
	width: 100% !important;
	margin: var(--tb-carousel-dots-margin-top) auto 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--tb-carousel-dot-gap) !important;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-page-dots .dot {
	width: var(--tb-carousel-dot-size) !important;
	height: var(--tb-carousel-dot-size) !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--tb-carousel-dot-bg) !important;
	opacity: 1 !important;
	transition: width .16s ease, background-color .16s ease;
}

:where(.tb-carousel, .tbv-latest.flickity-enabled) .flickity-page-dots .dot.is-selected {
	width: var(--tb-carousel-dot-active-width) !important;
	background: var(--tb-carousel-dot-active-bg) !important;
}

@media (max-width: 849px) {
	:where(.tbv-latest.flickity-enabled, .tb-carousel--hide-arrows-mobile) .flickity-prev-next-button {
		display: none !important;
	}
}