/*
 * PureCSS.com
 * https://purecss.com/examples/modal-dialog/
 * A modal using :target to show/hide without JavaScript.
 */

.demo-modal-dialog .modal-open-btn {
		display: inline-block;
		padding: .6rem 1.25rem;
		background: var(--accent);
		color: var(--bg);
		border-radius: 8px;
		font-size: .9rem;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
	}

.demo-modal-dialog .modal-overlay {
		display: none;
		position: absolute;
		inset: 0;
		background: rgba(0,0,0,.55);
		z-index: 10;
		align-items: center;
		justify-content: center;
	}

:is(.demo-modal-dialog .modal-overlay):target {
			display: flex;
		}

.demo-modal-dialog .modal-box {
		background: var(--surface);
		border-radius: 12px;
		padding: 2rem;
		max-width: 400px;
		width: 90%;
		box-shadow: 0 8px 32px rgba(0,0,0,.18);
		position: relative;
	}

:is(.demo-modal-dialog .modal-box) h3 {
			margin-bottom: .75rem;
			font-size: 1.2rem;
		}

:is(.demo-modal-dialog .modal-box) p {
			color: var(--text-muted);
			font-size: .9rem;
			margin-bottom: 1.25rem;
		}

.demo-modal-dialog .modal-close {
		display: inline-block;
		padding: .5rem 1rem;
		background: var(--surface-2);
		color: var(--text);
		border-radius: 6px;
		font-size: .875rem;
		text-decoration: none;
	}

:is(.demo-modal-dialog .modal-close):hover {
			background: var(--border);
		}