/**
 * Doctor AK Portal — Homepage doctors slider ([featured_doctors] shortcode).
 *
 * Loaded together with doctor-ak-auth.css (tokens, .dak-button*, .dak-eyebrow)
 * and doctor-ak-directory.css (.dak-doctor-card and everything inside it —
 * this stylesheet only adds the slider chrome around the same card partial
 * the full directory grid uses).
 */

.dak-featured-doctors {
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 3.5rem 1.5rem !important;
}

.dak-featured-doctors-header {
	display: flex !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	margin-bottom: 2.5rem !important;
}

.dak-featured-doctors-header h2 {
	margin: 0.4rem 0 0.6rem !important;
	font-size: 2rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em !important;
	color: var( --dak-text ) !important;
}

.dak-featured-doctors-header p {
	margin: 0 !important;
	max-width: 42ch !important;
	color: var( --dak-muted ) !important;
}

.dak-featured-doctors-view-more {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	white-space: nowrap !important;
}

.dak-featured-doctors-view-more svg {
	width: 1rem !important;
	height: 1rem !important;
}

.dak-featured-doctors-view-more-mobile {
	display: none !important;
	width: 100% !important;
	margin-top: 1.25rem !important;
	text-align: center !important;
	justify-content: center !important;
}

.dak-featured-doctors-slider {
	position: relative !important;
}

.dak-featured-doctors-track {
	/* Flex items default to min-width: auto, which means a flex child won't
	   shrink below its content's natural width — since the slides never
	   wrap, that natural width is the full unscrolled row of every card
	   end-to-end. Without this, the track just grows to fit all of them
	   instead of clipping/scrolling, pushing the whole section (and often
	   the page) wider than the viewport. */
	min-width: 0 !important;
	display: flex !important;
	gap: 1.5rem !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	scroll-behavior: smooth !important;
	padding: 0.75rem 0.1rem 1.25rem !important;
	/* Hide the scrollbar — navigation is via the prev/next buttons (and
	   touch/trackpad swipe still works underneath). */
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

.dak-featured-doctors-track::-webkit-scrollbar {
	display: none !important;
}

/* Fades the right edge so a partially visible next card reads as "more to
   scroll" rather than an abrupt clip. Only applied (via JS) while there is
   more content to scroll to on that side. */
.dak-featured-doctors-track.dak-fade-end {
	mask-image: linear-gradient( to right, black calc( 100% - 3rem ), transparent 100% ) !important;
	-webkit-mask-image: linear-gradient( to right, black calc( 100% - 3rem ), transparent 100% ) !important;
}

.dak-featured-doctors-slide {
	flex: 0 0 auto !important;
	width: 270px !important;
	scroll-snap-align: start !important;
}

.dak-featured-doctors-slide .dak-doctor-card {
	height: 100% !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.dak-featured-doctors-slide .dak-doctor-card:hover {
	transform: translateY( -4px ) !important;
	box-shadow: 0 12px 28px rgba( 20, 30, 40, 0.1 ) !important;
}

.dak-featured-doctors-slide .dak-avatar-lg {
	width: 104px !important;
	height: 104px !important;
	border: 3px solid var( --dak-primary-tint ) !important;
}

.dak-featured-doctors-slide .dak-avatar-lg svg {
	width: 48px !important;
	height: 48px !important;
}

/* Floating overlay buttons instead of flex siblings, so they don't eat
   into the track's width and clip the last visible card. */
.dak-featured-doctors-nav {
	position: absolute !important;
	top: 45% !important;
	transform: translateY( -50% ) !important;
	z-index: 2 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.75rem !important;
	height: 2.75rem !important;
	border-radius: 999px !important;
	border: 1px solid var( --dak-border ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	box-shadow: 0 6px 18px rgba( 20, 30, 40, 0.14 ) !important;
	cursor: pointer !important;
}

.dak-featured-doctors-prev {
	left: -1.375rem !important;
}

.dak-featured-doctors-next {
	right: -1.375rem !important;
}

.dak-featured-doctors-nav svg {
	width: 1.1rem !important;
	height: 1.1rem !important;
	flex-shrink: 0 !important;
	display: block !important;
	/* Belt-and-suspenders against the active theme resetting SVG stroke/fill
	   globally (some page-builder themes strip icon colors expecting an
	   <i> icon font instead) — pin these directly rather than relying only
	   on the button's inherited `color`/currentColor. */
	stroke: var( --dak-text ) !important;
	fill: none !important;
}

.dak-featured-doctors-nav:hover:not( :disabled ) svg {
	stroke: var( --dak-primary-dark ) !important;
}

.dak-featured-doctors-nav:hover:not( :disabled ) {
	border-color: var( --dak-primary ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-featured-doctors-nav:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

@media ( max-width: 640px ) {
	.dak-featured-doctors-header {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.dak-featured-doctors-view-more {
		display: none !important;
	}

	.dak-featured-doctors-view-more-mobile {
		display: inline-flex !important;
	}

	.dak-featured-doctors-nav {
		width: 2.25rem !important;
		height: 2.25rem !important;
	}

	.dak-featured-doctors-prev {
		left: -0.5rem !important;
	}

	.dak-featured-doctors-next {
		right: -0.5rem !important;
	}

	.dak-featured-doctors-slide {
		width: 82vw !important;
	}
}