/* ============================================
FIX: Recommended badge visibility on appointment page
============================================ */

/* Ensure highlighted cards have enough space for badge */
.med-card.med-card-highlight {
	overflow: visible !important;
	padding-top: 1.5rem !important;
	margin-top: 0.75rem !important;
}

/* Ensure badge is always visible */
.med-card-highlight .med-recommended-badge {
	z-index: 9999 !important;
	top: -14px !important;
}

/* Ensure parent containers don't clip the badge */
.med-grid:has(> .med-card-highlight),
.med-container .med-grid-3:has(> .med-card-highlight),
.med-container .med-grid-2:has(> .med-card-highlight) {
	overflow: visible !important;
	padding-top: 1rem !important;
}

/* Fallback for browsers without :has() support */
.med-section .med-grid,
.med-section .med-grid-3,
.med-section .med-grid-2 {
	overflow: visible;
}

/* EMERGENCY FIX: Force badge visibility with maximum specificity */
article.med-card.med-card-highlight {
	overflow: visible !important;
	padding-top: 1.5rem !important;
	margin-top: 0.75rem !important;
}

article.med-card.med-card-highlight .med-recommended-badge {
	position: absolute !important;
	top: -14px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 2147483647 !important;
}

/* Ensure the grid doesn't clip */
.med-section .med-grid,
.med-section .med-grid-3,
.med-section .med-grid-2,
.med-container .med-grid,
.med-container .med-grid-3,
.med-container .med-grid-2 {
	overflow: visible !important;
	padding-top: 0.5rem !important;
}

/* Ensure container doesn't clip */
.med-section {
	overflow: visible !important;
}

/* FIX: Prevent transform from creating clipping context */
.med-card-highlight,
article.med-card.med-card-highlight {
	/* Ensure transform doesn't clip positioned children */
	will-change: auto !important;
}

/* FIX: Transform causes clipping - use alternative approach for cards with badges */
article.med-card.med-card-highlight:has(.med-recommended-badge),
.med-card.med-card-highlight:has(.med-recommended-badge) {
	transform: none !important;
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
	padding-top: 2rem !important;
}

/* Alternative: if transform causes clipping, use margin instead */
@supports not (overflow: visible) {
	.med-card-highlight {
		transform: none !important;
		margin-top: -4px !important;
		margin-bottom: 4px !important;
	}
}