/**
 * Doctor AK Portal — Doctors directory grid + public profile view.
 *
 * Loaded together with doctor-ak-auth.css, which provides the shared design
 * tokens (--dak-primary, --dak-border, etc.), button primitives
 * (.dak-button*), and the defensive text-transform/letter-spacing reset.
 */

.dak-directory {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 2rem 1.5rem !important;
}

.dak-directory-header {
	text-align: center !important;
	margin-bottom: 2rem !important;
}

.dak-directory-header h1 {
	font-size: 1.75rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	margin: 0 0 0.5rem !important;
}

.dak-directory-header p {
	color: var( --dak-muted ) !important;
	margin: 0 !important;
}

.dak-directory-filters {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.75rem !important;
	margin-bottom: 1.75rem !important;
}

.dak-directory-search {
	position: relative !important;
	flex: 1 1 280px !important;
}

.dak-directory-search-icon {
	position: absolute !important;
	top: 50% !important;
	left: 0.85rem !important;
	transform: translateY( -50% ) !important;
	width: 1.1rem !important;
	height: 1.1rem !important;
	color: var( --dak-muted ) !important;
	pointer-events: none !important;
}

.dak-directory-search input[type='search'] {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.65rem 0.85rem 0.65rem 2.4rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.95rem !important;
}

.dak-directory-search input[type='search']:focus {
	outline: none !important;
	border-color: var( --dak-primary ) !important;
	box-shadow: 0 0 0 3px var( --dak-primary-tint ) !important;
}

#dak-directory-specialization-filter {
	flex: 0 1 220px !important;
	padding: 0.65rem 0.85rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.95rem !important;
}

.dak-directory-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) ) !important;
	gap: 1.5rem !important;
}

.dak-doctor-card.dak-hidden {
	display: none !important;
}

.dak-doctor-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 0.5rem !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	box-shadow: var( --dak-shadow ) !important;
	padding: 1.5rem 1.25rem !important;
}

.dak-doctor-card-badge {
	position: absolute !important;
	top: 0.9rem !important;
	right: 0.9rem !important;
	padding: 0.2rem 0.6rem !important;
	border-radius: 999px !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
}

/* .dak-avatar base rules (normally defined in doctor-ak-dashboard.css, which
   isn't loaded on these public-facing pages) */
.dak-avatar {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
}

.dak-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.dak-avatar-lg {
	width: 84px !important;
	height: 84px !important;
	margin-bottom: 0.25rem !important;
}

.dak-avatar-lg svg {
	width: 40px !important;
	height: 40px !important;
}

.dak-doctor-card-name {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	margin: 0 !important;
}

.dak-doctor-card-specialties {
	justify-content: center !important;
}

.dak-doctor-card-location {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.35rem !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	color: var( --dak-muted ) !important;
}

.dak-doctor-card-location .dak-location-icon {
	display: inline-flex !important;
	flex-shrink: 0 !important;
	width: 14px !important;
	height: 14px !important;
	color: var( --dak-secondary ) !important;
}

.dak-doctor-card-location .dak-location-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-doctor-card-actions {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	width: 100% !important;
	margin-top: 0.5rem !important;
}

.dak-doctor-card-actions .dak-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.4rem !important;
}

.dak-doctor-card-actions .dak-button svg {
	width: 18px !important;
	height: 18px !important;
}

/* Specialty tags — also used on the dashboard (doctor-ak-dashboard.css),
   redefined here since that stylesheet isn't loaded on these public pages. */
.dak-specialty-tags {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.35rem !important;
}

.dak-specialty-tag {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.2rem 0.6rem !important;
	border-radius: 999px !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
}

/* Public profile view ([doctor_profile_view]) */

.dak-profile-breadcrumb {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.4rem !important;
	margin-bottom: 1.25rem !important;
	font-size: 0.85rem !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-breadcrumb a {
	color: var( --dak-muted ) !important;
	text-decoration: none !important;
}

.dak-profile-breadcrumb a:hover {
	color: var( --dak-primary-dark ) !important;
	text-decoration: underline !important;
}

.dak-profile-breadcrumb span:last-child {
	color: var( --dak-text ) !important;
	font-weight: 600 !important;
}

.dak-profile-header-card {
	display: flex !important;
	align-items: flex-start !important;
	gap: 1.5rem !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	box-shadow: var( --dak-shadow ) !important;
	padding: 1.75rem !important;
	margin-bottom: 1.5rem !important;
}

.dak-profile-header-card .dak-avatar-lg {
	width: 100px !important;
	height: 100px !important;
	margin-bottom: 0 !important;
	flex: 0 0 auto !important;
	font-size: 1.6rem !important;
	font-weight: 700 !important;
}

.dak-profile-header-main {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.65rem !important;
}

.dak-profile-header-main h1 {
	font-size: 1.6rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	margin: 0 !important;
}

.dak-profile-stats {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1.5rem !important;
	margin-top: 0.25rem !important;
}

.dak-profile-stat {
	display: flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	font-size: 0.8rem !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-stat strong {
	color: var( --dak-text ) !important;
	font-size: 0.9rem !important;
}

.dak-profile-stat-icon {
	display: inline-flex !important;
	width: 1.1rem !important;
	height: 1.1rem !important;
	color: var( --dak-secondary ) !important;
}

.dak-profile-stat-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-profile-stat-link {
	text-decoration: none !important;
	border-radius: var( --dak-radius-sm ) !important;
	cursor: pointer !important;
}

.dak-profile-stat-link:hover {
	color: var( --dak-primary-dark ) !important;
}

.dak-profile-stat-link:hover strong {
	color: var( --dak-primary-dark ) !important;
}

.dak-profile-header-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.65rem !important;
	margin-top: 0.5rem !important;
}

.dak-profile-header-actions .dak-button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
}

.dak-profile-header-actions .dak-button svg {
	width: 1rem !important;
	height: 1rem !important;
}

.dak-profile-layout {
	display: grid !important;
	grid-template-columns: 1fr 320px !important;
	gap: 1.5rem !important;
	align-items: start !important;
}

.dak-profile-main {
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

.dak-profile-card {
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	box-shadow: var( --dak-shadow ) !important;
	padding: 1.5rem !important;
}

.dak-profile-card h2 {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin: 0 0 1rem !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-card-title-icon {
	display: inline-flex !important;
	width: 1rem !important;
	height: 1rem !important;
	color: var( --dak-secondary ) !important;
}

.dak-profile-card-title-icon svg {
	width: 100% !important;
	height: 100% !important;
}

#dak-profile-clinics {
	scroll-margin-top: 1.5rem !important;
}

.dak-profile-clinics {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.75rem !important;
}

.dak-profile-clinic-row {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	padding: 1rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
}

.dak-profile-clinic-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.3rem !important;
	min-width: 0 !important;
}

.dak-profile-clinic-info strong {
	font-size: 0.95rem !important;
	color: var( --dak-text ) !important;
}

.dak-profile-clinic-meta {
	display: flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	font-size: 0.8rem !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-clinic-meta .dak-location-icon {
	display: inline-flex !important;
	flex-shrink: 0 !important;
	width: 0.9rem !important;
	height: 0.9rem !important;
	color: var( --dak-secondary ) !important;
}

.dak-profile-clinic-meta .dak-location-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-profile-clinic-fee {
	flex: 0 0 auto !important;
	text-align: right !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.15rem !important;
}

.dak-profile-clinic-fee span {
	font-size: 0.7rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-clinic-fee strong {
	font-size: 1rem !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-profile-sidebar {
	position: sticky !important;
	top: 1.5rem !important;
}

.dak-profile-booking-card h2 {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 1.15rem !important;
	color: var( --dak-text ) !important;
	margin: 0.5rem 0 0.35rem !important;
}

.dak-profile-booking-hint {
	color: var( --dak-muted ) !important;
	font-size: 0.85rem !important;
	margin: 0 0 1rem !important;
}

.dak-profile-booking-fee {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	border-top: 1px solid var( --dak-border ) !important;
	border-bottom: 1px solid var( --dak-border ) !important;
	padding: 0.75rem 0 !important;
	margin-bottom: 1rem !important;
	font-size: 0.88rem !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-booking-fee strong {
	color: var( --dak-text ) !important;
	font-size: 1.05rem !important;
}

.dak-profile-booking-note {
	font-size: 0.75rem !important;
	color: var( --dak-muted ) !important;
	text-align: center !important;
	margin: 0.85rem 0 0 !important;
}

@media ( max-width: 860px ) {
	.dak-profile-layout {
		grid-template-columns: 1fr !important;
	}

	.dak-profile-sidebar {
		position: static !important;
	}
}

@media ( max-width: 600px ) {
	.dak-profile-header-card {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}

	.dak-profile-stats {
		justify-content: center !important;
	}

	.dak-profile-header-actions {
		justify-content: center !important;
		width: 100% !important;
	}

	.dak-profile-header-actions .dak-button {
		flex: 1 1 auto !important;
		justify-content: center !important;
	}

	.dak-profile-clinic-row {
		flex-direction: column !important;
	}

	.dak-profile-clinic-fee {
		text-align: left !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 0.4rem !important;
	}
}