/* Physician Directory (Secure) — frontend styles */

.pds-slider {
	position: relative;
	--pds-gap: 24px;
	max-width: 100%;
}

/* Both layouts clip at the widget's own edges. Peek mode's "spill" effect
   comes from neighboring slides simply sitting partially outside the
   *active* card's centered position within this clipped viewport — not
   from letting content overflow past the container/page. An earlier
   version set overflow:visible here for peek mode, which let peeking
   cards spill past the browser viewport on narrow screens and forced
   the whole page to scroll horizontally. Always clipping here fixes
   that while keeping the same visual peek effect. */
.pds-slider__viewport {
	overflow: hidden;
	max-width: 100%;
}

.pds-slider__track {
	display: flex;
	will-change: transform;
}

.pds-slide {
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 0 calc(var(--pds-gap) / 2);
	transition: opacity 0.3s ease;
}

.pds-slider--peek .pds-slide:not(.is-active) {
	opacity: 0.55;
}

/* Purely decorative wraparound clones (see pds-slider.js) — never
   interactive, and never announced to assistive tech since the real
   slide they duplicate is reachable normally via navigation. */
.pds-slide--clone {
	pointer-events: none;
}

.pds-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	background: #fff;
	border: 1px solid #e5e9f0;
	border-radius: 20px;
	overflow: hidden;
	height: 100%;
	padding: 20px;
	gap: 20px;
	transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.pds-slide.is-active .pds-card {
	box-shadow: 0 12px 30px rgba(29, 78, 216, 0.12);
}

.pds-card__image-wrap {
	flex: 0 0 42%;
	overflow: hidden;
	position: relative;
	background: #eee;
	border-radius: 14px;
	min-height: 180px;
}

.pds-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pds-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.pds-card__name {
	margin: 0;
	font-size: 1.3em;
	font-weight: 700;
	color: #1d4ed8;
}

.pds-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 600;
}

.pds-card__rating-value {
	color: #1f9d55;
}

.pds-card__rating-stars {
	display: inline-flex;
	gap: 2px;
}

.pds-card__star {
	width: 14px;
	height: 14px;
	color: #d8dee8;
}

.pds-card__star svg {
	width: 100%;
	height: 100%;
	display: block;
}

.pds-card__star.is-filled {
	color: #f5a623;
}

.pds-card__rating-count {
	opacity: 0.6;
	font-weight: 400;
	font-size: 0.9em;
}

.pds-card__title,
.pds-card__location {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.75;
}

.pds-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.pds-card__tag {
	display: inline-block;
	padding: 0.3em 0.8em;
	border-radius: 999px;
	background: #dcebff;
	color: #1d4ed8;
	font-size: 0.8em;
	font-weight: 600;
	white-space: nowrap;
}

.pds-card__details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pds-card__detail {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88em;
	color: #4b5563;
}

.pds-card__detail-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: #1d4ed8;
	display: inline-flex;
}

.pds-card__detail-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.pds-card__button {
	display: inline-block;
	align-self: flex-start;
	margin-top: 4px;
	padding: 0.65em 1.5em;
	border-radius: 999px;
	border: 1.5px solid #1d4ed8;
	color: #1d4ed8;
	background: transparent;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pds-card__button:hover {
	background: #1d4ed8;
	color: #fff;
}

/* Controls row: arrows + pagination centered below the track, matching
   the reference layout rather than floating arrows over the cards. */
.pds-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5em;
	margin-top: 2em;
}

.pds-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid currentColor;
	color: #1d4ed8;
	cursor: pointer;
	padding: 0;
}

.pds-slider__arrow svg {
	width: 45%;
	height: 45%;
}

.pds-slider__arrow:hover:not(:disabled) {
	background: rgba(29, 78, 216, 0.08);
}

.pds-slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.pds-slider__pagination {
	display: flex;
	gap: 0.5em;
}

.pds-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ccc;
	border: none;
	padding: 0;
	cursor: pointer;
}

.pds-slider__dot.is-active {
	background: #333;
}

.pds-restricted-notice {
	font-style: italic;
	opacity: 0.75;
}

/* Single template */
.pds-single {
	display: flex;
	gap: 2em;
	flex-wrap: wrap;
}

.pds-single__photo img {
	max-width: 320px;
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

.pds-single__details {
	flex: 1;
	min-width: 260px;
}

@media (max-width: 1024px) {
	.pds-slider__controls {
		margin-top: 1.5em;
	}
}

@media (max-width: 767px) {
	.pds-card {
		flex-direction: column;
		padding: 16px;
	}
	.pds-card__image-wrap {
		flex-basis: auto;
		height: 200px;
		min-height: 0;
	}
	.pds-card__name {
		font-size: 1.15em;
	}
	.pds-card__button {
		align-self: stretch;
		text-align: center;
	}
}

@media (max-width: 400px) {
	.pds-card__image-wrap {
		height: 160px;
	}
	.pds-slider__controls {
		gap: 1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pds-slider__track,
	.pds-slide,
	.pds-card {
		transition: none !important;
	}
}

/* mobile-fit */
.pds-slider,.pds-slider__viewport{width:100%;min-width:0}
.pds-slider__track{align-items:stretch}
@media (max-width: 767px){
	.pds-slide .pds-card{gap:16px}
	.pds-card__image-wrap{width:100%;height:210px}
	.pds-card__body{gap:8px}
	.pds-card__name{font-size:1.25em;line-height:1.2;word-break:normal}
	.pds-card__tags{gap:6px}
	.pds-card__detail{font-size:.9em}
}
/* end mobile-fit */