/**
 * Section 12b — trip-feedback popup chrome, visitor homepage only (inc/enqueue.php).
 * Everything inside the panel (privacy line, question, options, comment, submit) reuses
 * feedback.css's .feedback-* classes and components.css's .form-field/.btn — this file is
 * only the dialog shell, styled with the same visibility+transition technique as
 * nav-drawer.css's off-canvas drawer, and the same z-index stacking convention (above the
 * drawer's 150/160).
 */

/*
 * One element is both the dimmed backdrop and the centering wrapper — not a separate
 * backdrop layer under a full-viewport dialog wrapper. Two overlapping full-viewport
 * elements would mean the wrapper (being on top) intercepts every click before it can
 * reach a backdrop underneath, breaking "click outside to close". Here, main.js checks
 * `event.target === modal` to tell a click on this element's own padding (outside the
 * panel) apart from a click inside .tf-modal__panel.
 */
.tf-modal {
	position: fixed;
	inset: 0;
	z-index: 260;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 40, 46, 0.4);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease, visibility 0.25s;
}

.tf-modal__panel {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--safi-surface);
	border: 1px solid var(--safi-border-card);
	border-radius: var(--safi-radius-md);
	box-shadow: var(--safi-shadow-card-lg);
	padding: 34px 30px 30px;
	transform: translateY(14px) scale(0.98);
	transition: transform 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
	.tf-modal,
	.tf-modal__panel {
		transition: none;
	}
}

/* Open state, toggled by assets/js/main.js */
body.tf-modal-open {
	overflow: hidden;
}

body.tf-modal-open .tf-modal {
	visibility: visible;
	opacity: 1;
}

body.tf-modal-open .tf-modal .tf-modal__panel {
	transform: translateY(0) scale(1);
}

.tf-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--safi-radius-sm);
	border: 1px solid var(--safi-border-card) !important;
	background: var(--safi-surface);
	cursor: pointer;
}

.tf-modal__close:hover,
.tf-modal__close:focus,
.tf-modal__close:focus-visible {
	background: var(--safi-bg-alt) !important;
}

.tf-modal__close svg {
	width: 18px;
	height: 18px;
	stroke: var(--safi-petrol);
}

.tf-modal__title {
	margin: 0 40px 10px 0;
	font-size: 1.2rem;
	line-height: 1.4;
	font-weight: 700;
	color: var(--safi-petrol);
}

.tf-modal__intro {
	margin: 0 0 18px;
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--safi-text-muted-3);
}

@media (max-width: 560px) {
	.tf-modal__panel {
		padding: 28px 20px 24px;
	}
}