/* Nedclan New Category — front-end slider styles.
   Scoped entirely under .nc-slider-wrap so it never leaks into Astra / Hello Elementor theme styles. */

.nc-slider-wrap {
	--nc-thumb-ratio: 4 / 5;
	--nc-thumb-radius: 10px;
	--nc-bg-color: #ffffff;
	--nc-hover-bg-color: #f7f7f7;
	--nc-shadow-color: rgba(0, 0, 0, 0.15);
	--nc-shadow-display: 1;
	--nc-nav-bg-color: #ff7a00;
	--nc-nav-bg-hover-color: #e56d00;
	--nc-nav-icon-color: #ffffff;
	--nc-nav-size: 40px;
	--nc-nav-spacing: 10px;
	--nc-nav-padding: 0;
	--nc-nav-margin: 0;
	--nc-nav-radius: 50%;
	--nc-dot-color: #dddddd;
	--nc-dot-active-color: #ff7a00;
	--nc-dot-size: 8px;
	--nc-dot-spacing: 6px;
	--nc-dot-padding: 0;
	--nc-dot-margin: 16px 0 0 0;
	--nc-title-font-family: inherit;
	--nc-title-font-size: 20px;
	--nc-title-font-weight: 600;
	--nc-title-color: #111111;
	--nc-title-padding: 0;
	--nc-title-margin: 0 0 16px 0;
	--nc-slide-gap: 16px;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	position: relative;
}

.nc-slider-wrap * ,
.nc-slider-wrap *::before,
.nc-slider-wrap *::after {
	box-sizing: border-box;
}

/* Header row: title left, nav arrows right */
.nc-slider-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.nc-slider-header--nav-only {
	justify-content: flex-end;
}

.nc-slider-title {
	font-family: var(--nc-title-font-family);
	font-size: var(--nc-title-font-size);
	font-weight: var(--nc-title-font-weight);
	color: var(--nc-title-color);
	padding: var(--nc-title-padding);
	margin: var(--nc-title-margin);
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Navigation buttons */
.nc-nav-group {
	display: flex;
	align-items: center;
	gap: var(--nc-nav-spacing);
	padding: var(--nc-nav-padding);
	margin: var(--nc-nav-margin);
	flex-shrink: 0;
}

.nc-nav-btn {
	width: var(--nc-nav-size);
	height: var(--nc-nav-size);
	border-radius: var(--nc-nav-radius);
	background-color: var(--nc-nav-bg-color);
	color: var(--nc-nav-icon-color);
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
	padding: 0;
	line-height: 0;
}

.nc-nav-btn svg {
	width: 40%;
	height: 40%;
	display: block;
}

.nc-nav-btn:hover {
	background-color: var(--nc-nav-bg-hover-color);
}

.nc-nav-btn:active {
	transform: scale(0.94);
}

.nc-nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Swiper container */
.nc-swiper {
	width: 100%;
	overflow: hidden;
	padding: 4px 2px 8px;
}

.nc-swiper .swiper-wrapper {
	align-items: stretch;
}

.nc-slide-inner {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background-color: var(--nc-bg-color);
	border-radius: calc(var(--nc-thumb-radius) + 2px);
	transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
	height: 100%;
}

.nc-slide-inner:hover {
	background-color: var(--nc-hover-bg-color);
}

/* Shadow toggle handled via a modifier class set in PHP for reliability across browsers */
.nc-slider-wrap.nc-shadow-on .nc-slide-inner:hover {
	box-shadow: 0 12px 28px var(--nc-shadow-color);
	transform: translateY(-2px);
}

.nc-thumb {
	display: block;
	width: 100%;
	aspect-ratio: var(--nc-thumb-ratio);
	overflow: hidden;
	border-radius: var(--nc-thumb-radius);
	background: #f2f2f2;
}

.nc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.nc-slide-inner:hover .nc-thumb img {
	transform: scale(1.04);
}

.nc-type-brand .nc-thumb {
	margin-left: auto;
	margin-right: auto;
}

.nc-slide-name {
	display: block;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 10px 4px 4px;
	color: inherit;
}

/* Pagination dots */
.nc-pagination.swiper-pagination {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--nc-dot-spacing);
	padding: var(--nc-dot-padding);
	margin: var(--nc-dot-margin);
	line-height: 0;
}

.nc-pagination .swiper-pagination-bullet {
	width: var(--nc-dot-size);
	height: var(--nc-dot-size);
	background-color: var(--nc-dot-color);
	opacity: 1;
	border-radius: 50%;
	margin: 0;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.nc-pagination .swiper-pagination-bullet-active {
	background-color: var(--nc-dot-active-color);
	transform: scale(1.15);
}

/* Grid layout — used by the "show all" shortcodes/widgets, or layout="grid" override.
   Reuses the same slide markup/styling as the slider, laid out in a responsive CSS grid
   instead of a Swiper track, so every item is visible at once with no arrows or dots. */
.nc-grid {
	display: grid;
	grid-template-columns: repeat(var(--nc-grid-cols-mobile), 1fr);
	gap: var(--nc-slide-gap);
	width: 100%;
}

@media (min-width: 600px) {
	.nc-grid {
		grid-template-columns: repeat(var(--nc-grid-cols-tablet), 1fr);
	}
}

@media (min-width: 1025px) {
	.nc-grid {
		grid-template-columns: repeat(var(--nc-grid-cols-desktop), 1fr);
	}
}

.nc-grid-item {
	min-width: 0;
}

.nc-admin-inline-notice {
	padding: 14px 16px;
	background: #fff8e5;
	border: 1px solid #f0d999;
	border-radius: 6px;
	color: #6b5300;
	font-size: 13px;
}

/* Responsive title/nav stacking safety on very small screens */
@media (max-width: 380px) {
	.nc-slider-title {
		font-size: calc(var(--nc-title-font-size) * 0.85);
	}
	.nc-nav-btn {
		width: calc(var(--nc-nav-size) * 0.85);
		height: calc(var(--nc-nav-size) * 0.85);
	}
}