/* Custom scrollbar for the explanation panel */
.h-auto {
    height: auto;
}

.w-full {
    width: 100%;
}

.object-contain {
    object-fit: contain;
}

.hidden{
	display: none;
}

.relative{
	position: relative;
}

.explanation-panel::-webkit-scrollbar {
	width: 8px;
}
.explanation-panel::-webkit-scrollbar-track {
	background-color: #E5E7EB; /* bg-gray-200 */
	border-radius: 9999px; /* rounded-full */
}
.explanation-panel::-webkit-scrollbar-thumb {
	background-color: #3B82F6; /* bg-blue-500 */
	border-radius: 9999px; /* rounded-full */
}
.explanation-panel::-webkit-scrollbar-thumb:hover {
	background-color: #2563EB; /* bg-blue-600 */
}

/* Hide all labels by default, JavaScript will show the active one */
.labels {
	display: none;
}

/* New style for the interactive area overlay */
.label-overlay {
	position: absolute;
	background-color: transparent; /* Default transparent */
	border: 2px solid transparent; /* Default transparent border */
	border-radius: 8px; /* Rounded corners */
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	cursor: pointer;
	display: flex; /* For centering the point inside */
	justify-content: center; /* Initial centering for label-point */
	align-items: center; /* Initial centering for label-point */
	z-index: 9; /* Ensure overlay is clickable and appears above the image */
}

/* Hover state: opacity 0.1 and specific background color, no border change on hover */
.label-overlay:hover {
	background-color: rgba(46, 107, 175, 0.1); /* Changed to #2e6baf with 0.1 opacity */
	border-color: transparent; /* No border on hover, only on active */
	box-shadow: none; /* No shadow on hover */
}

/* Active state for clicked overlay */
.label-overlay.active {
	background-color: rgba(0, 123, 255, 0.2);
	border-color: #0056b3; /* Border visible when active */
	box-shadow: 0 0 15px rgba(0, 123, 255, 0.5); /* Add a subtle glow when active */
}

/* Style for the order number displayed on the overlay */
.order-number-overlay {
	position: absolute;
	width: 28px; /* Make it a small circle */
	height: 28px;
	background-color: #2563EB; /* bg-blue-600 */
	color: #FFFFFF; /* text-white */
	font-weight: 700; /* font-bold */
	font-size: 0.75rem; /* text-xs */
	line-height: 1rem; /* text-xs */
	border-radius: 9999px; /* rounded-full */
	display: flex; /* flex */
	align-items: center; /* items-center */
	justify-content: center; /* justify-center */
	border: 2px solid white; /* White border for contrast */
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	z-index: 11; /* Above overlay and label point */
	display: none; /* Hidden by default, shown when active */

	/* Default position for top-center (other hotzones) */
	top: -14px; /* Half of its height above the top edge */
	left: 50%;
	transform: translateX(-50%); /* Horizontally center */
}
/* Specific positioning for OD/OS, brand, exp (left-middle) */
.order-number-overlay.left-middle {
	top: 50%; /* Vertically center */
	left: -14px; /* Half of its width to the left of the left edge */
	transform: translateY(-50%); /* Vertically center */
}

.label-overlay.active .order-number-overlay {
	display: flex; /* Show when its parent overlay is active */
}


/* Make the label-point smaller and position it to the top-left of the label-overlay */
.label-point {
	position: absolute; /* Absolute positioning relative to label-overlay */
	width: 7.2px; /* 16px * 0.7 = 11.2px (30% smaller) */
	height: 7.2px; /* 16px * 0.7 = 11.2px (30% smaller) */
	background-color: #f77b2f; /* Changed to #f77b2f */
	border-radius: 9999px; /* rounded-full */
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
	transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
	z-index: 10; /* Ensure the point is above the overlay */

	/* Position to the top-left of the label-overlay */
	top: 5px;
	left: 5px;
	transform: translate(-50%, -50%); /* Adjust to truly position top-left of the point itself */
}

.label-overlay:hover .label-point {
	transform: scale(1.3) translate(-38.5%, -38.5%); /* Scale up and adjust transform for visual centering when scaled */
	background-color: #e06c2a; /* Darker shade for hover */
}

/* Hide label-point when its parent label-overlay is active */
.label-overlay.active .label-point {
	display: none;
}

/* IMPORTANT: By default, explanation items are hidden. JavaScript will show the active one. */
.explanation-item {
	border-left-width: 4px; /* border-l-4 */
	border-left-color: transparent; /* border-transparent */
	padding: 1rem; /* p-4 */
	margin-top: 0.5rem; /* my-2 */
	margin-bottom: 0.5rem; /* my-2 */
	transition-property: all; /* transition-all */
	transition-duration: 300ms; /* duration-300 */
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
	border-radius: 0.5rem; /* rounded-lg */
	display: none; /* Hide by default */
	min-height: 180px; /* Updated min-height to 180px */
}
.explanation-item.active {
	border-left-color: #2563EB; /* border-blue-600 */
	background-color: #EFF6FF; /* bg-blue-50 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
	display: block; /* Show active item */
}
/* Style for disabled buttons (now in standard CSS) */
.btn:disabled {
	background-color: #D1D5DB; /* bg-gray-300 */
	color: #6B7280; /* text-gray-500 */
	cursor: not-allowed;
}
.btn:disabled:hover { /* Specific hover for disabled state */
	background-color: #D1D5DB; /* hover:bg-gray-300 */
	color: #6B7280; /* hover:text-gray-500 */
}
/* New style for navigation buttons container when placed under explanation panel */
.navigation-buttons-container {
	display: flex;
	gap: 1rem; /* Equivalent to Tailwind 'gap-4' */
	width: 100%; /* Take full width */
	padding-top: 0.5rem; /* Add some space above the buttons */
}

.navigation-buttons-container button{
	height: 40px;
    font-size: 16px;
	background-color: #001d9b;
	color: #fff;
	flex-grow:1;
	border-radius: 50px;
}
/* Ensure explanation-panel is a flex container for auto margin to work */
.explanation-panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* Align items to start, allow content to push nav buttons */
	max-height: 80vh; /* Updated max-height to 80vh */
	overflow-y: auto; /* Keep scroll for panel content */
}
/* Styling for the prescription-selector now outside the explanation panel */
.prescription-selector {
	margin-top: 1.5rem; /* Add some space above the selector */
	padding-top: 1.5rem; /* Add padding at the top */
	border-top: 1px solid #E5E7EB; /* Add a separator line above it */
	width: 100%; /* Ensure it takes full width when moved */
	display: flex; /* Make it a flex container */
	flex-direction: column; /* Stack items vertically */
	align-items: flex-start; /* Align items to start */
	gap: 0.5rem; /* Reduced gap */
}
/* Ensure content-wrapper is a flex container for proper layout */
.content-wrapper {
	display: flex;
	flex-direction: column; /* Stack children vertically */
	align-items: center; /* Center items horizontally */
	width: 100%; /* Take full width */
	/* Removed max-w-6xl px-4 as it's now handled by the main tag below */
}
/* Adjust main content container when view selector is moved out */
/* This is now the main tag itself */
.main-content-area { /* Renamed from .content-container to avoid confusion with the div inside */
	width: 100%; /* Ensure it takes full width */
	display: flex; /* Re-apply flex for its children */
	flex-direction: column; /* Stack children vertically on small screens */
	align-items: flex-start; /* Align items to start */
	gap: 2rem; /* Consistent gap */
	max-width: 1024px; /* Re-apply max-width for content, equivalent to max-w-6xl */
	padding-left: 1rem; /* px-4 */
	padding-right: 1rem; /* px-4 */
}
@media (min-width: 1024px) { /* lg breakpoint */
	.main-content-area {
		flex-direction: row; /* Side-by-side on large screens */
		align-items: flex-start;
	}
	/* On desktop, nav buttons are after explanation items */
	.explanation-panel .navigation-buttons-container {
		order: 1; 
		margin-top: 0.5rem; /* Space below explanation items */
		margin-bottom: 0; /* No extra margin at bottom */
	}
	.explanation-panel #explanation-items-wrapper {
		order: 0; /* On desktop, explanation items are first */
	}
	.explanation-panel .prescription-selector {
		order: 2; /* On desktop, prescription selector is last */
		margin-top: 1.5rem; /* Add some space above the selector */
	}
}

/* Mobile/Tablet specific ordering */
@media (max-width: 1023px) { /* For screens smaller than lg (1024px) */
	.explanation-panel .navigation-buttons-container {
		order: -1; /* On mobile/tablet, nav buttons are above explanation items */
		margin-top: 0; /* No top margin if it's first */
		margin-bottom: 0.5rem; /* Space before explanation items */
	}
	.explanation-panel #explanation-items-wrapper {
		order: 0; /* On mobile/tablet, explanation items are after nav buttons */
	}
	.explanation-panel .prescription-selector {
		order: 1; /* On mobile/tablet, prescription selector is after nav buttons and explanation items */
		margin-top: 1.5rem; /* Add some space above the selector */
	}
}

/* Styling for checkbox labels to look like buttons */
.prescription-selector label.prescription-option {
	display: flex; /* Changed to flex for alignment */
	align-items: center; /* Vertically align checkbox and text */
	font-size: 1.125rem; /* text-lg */
	line-height: 1.75rem; /* text-lg */
	font-weight: 600; /* font-semibold */
	border-radius: 0.5rem; /* rounded-lg, more subtle for checkbox */
	box-shadow: none; /* No shadow for checkbox style */
	transition-property: all;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	background-color: transparent; /* Default transparent background */
	color: #4B5563; /* text-gray-700 */
	cursor: pointer;
	border: 1px solid transparent; /* Default transparent border */
}
.prescription-selector label.prescription-option:hover {
	background-color: #F3F4F6; /* hover:bg-gray-100 */
	color: #1F2937; /* hover:text-gray-800 */
}
/* Styling for checked state of checkbox labels */
.prescription-selector input[type="checkbox"]:checked + span {
	/* This rule is for the span text when checkbox is checked */
	color: #2563EB; /* text-blue-600 */
}
/* Adjust the span inside label to take full space and apply background/color */
.prescription-selector label.prescription-option span {
	/* Removed flex, height, width, border-radius, transition as it's not a button-like span anymore */
	display: inline-block; /* Revert to inline-block for text */
}
/* Ensure the static button has the correct active styling */
#static-btn-ss {
	background-color: #3B82F6; /* bg-blue-500 */
	color: #FFFFFF; /* text-white */
	cursor: default; /* Not clickable */
	display:none; /* Hidden as it's not needed */
}
/* Custom styling for native checkboxes */
.form-checkbox {
	appearance: none; /* Hide default checkbox */
	display: inline-block;
	height: 1.25rem; /* h-5 */
	width: 1.25rem; /* w-5 */
	border: 2px solid #6B7280; /* border-gray-500 */
	border-radius: 0.25rem; /* rounded */
	vertical-align: middle;
	position: relative;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
	margin-right: 0.5rem; /* Add space between checkbox and text */
}
.form-checkbox:checked {
	background-color: #2563EB; /* bg-blue-600 */
	border-color: #2563EB; /* border-blue-600 */
}
.form-checkbox:checked::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem; /* Checkmark width */
	height: 0.8rem; /* Checkmark height */
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -60%) rotate(45deg); /* Position and rotate checkmark */
}
/* Styling for the view type selector */
.view-type-selector {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #E5E7EB;
	width: 100%; /* Take full width */
	text-align: center; /* Center radio buttons */
}
/* Container for the view mode options */
.view-mode-options {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}