/* Overlay for the modal: covers entire screen with a semi-transparent background */
.wpas-modal-overlay {
    @apply fixed inset-0 bg-gray-500/60 transition-opacity;
    z-index: 0; /* Below other UI elements */
}

/* Wrapper that centers the modal vertically and horizontally */
.wpas-modal-wrapper {
    @apply flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0;
}

/* Helper element to vertically center the modal content on larger screens */
.wpas-modal-trick {
    @apply hidden sm:inline-block sm:align-middle sm:h-screen;
}

/* The modal container itself: white box with rounded corners, padding, shadow, and transitions */
.wpas-modal {
    @apply inline-block align-bottom bg-white rounded-lg px-6 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 relative;
    max-height: 90vh; /* maximum height of the viewport */
    overflow-y: auto; /* enables scrolling if content is too long */
}

/* Close button styling: positioned top-right with hover effect */
.wpas-modal-close {
    @apply absolute top-4 right-4 text-gray-400 hover:text-gray-600 cursor-pointer;
}

/* Modal title style: larger font, bold, with bottom margin */
.wpas-modal-title {
    @apply text-lg font-semibold text-gray-900 mb-4;
}

/* Modal content wrapper: vertical spacing, smaller font, muted text color */
.wpas-modal-content {
    @apply space-y-4 text-sm text-gray-700;
}

/* Section title inside modal: bold font */
.wpas-modal-section-title {
    @apply font-semibold;
}

/* List style inside modal sections: disc bullets, inside padding */
.wpas-modal-list {
    @apply list-disc list-inside;
}

/* Footer area of the modal: margin top and right-aligned content */
.wpas-modal-footer {
    @apply mt-6 text-right;
}

/* Close button inside modal footer: blue background with white text, rounded, hover effect */
.wpas-modal-close-button {
    @apply inline-block px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700;
}

/* List styling for modal sections */
.wpas-modal-list {
    @apply list-disc pl-5 space-y-1 text-gray-800;
}

/* Color customization for list bullet markers */
.wpas-modal-list li::marker {
    color: #3b82f6;
}

/* Better visual spacing between individual list items */
.wpas-modal-list li {
    @apply mb-1;
}