/* ============================================================
   Legal documents — searchable register with inline view/download
   ([rx_legal_documents])
   ============================================================ */

.rx-legal .rx-section__inner { max-width: 1240px; }

/* Dense reference page — tighter vertical rhythm than a marketing section.
   Hero-to-content compaction is handled per page-id in sections.css. */
.rx-legal { padding-top: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.rx-legal .rx-section__header { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

/* ── Tools bar: search + category tabs (sticks under the header) ── */
.rx-legal__tools {
	position: sticky;
	top: 76px;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rx-s-3);
	padding: 14px;
	margin-bottom: var(--rx-s-3);
	border-radius: var(--rx-r-lg);
	border: 1px solid var(--rx-stroke-light);
	background: rgba(16, 19, 32, 0.82);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.8);
}

.rx-legal__search {
	position: relative;
	flex: 1 1 260px;
	display: flex;
	align-items: center;
}
.rx-legal__search-ic {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	color: rgba(255, 255, 255, 0.42);
	pointer-events: none;
}
input.rx-legal__input {
	width: 100%;
	height: 46px;
	padding: 0 18px 0 44px;
	border-radius: var(--rx-r-pill, 999px);
	border: 1px solid var(--rx-stroke-light);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font-size: var(--rx-fs-sm);
	font-family: inherit;
	transition: border-color 160ms, background 160ms, box-shadow 160ms;
}
.rx-legal__input::placeholder { color: rgba(255, 255, 255, 0.4); }
input.rx-legal__input:focus {
	outline: none;
	border-color: rgba(240, 133, 102, 0.6);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 4px rgba(220, 79, 44, 0.16);
}

/* ── Category tabs ── */
.rx-legal__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
/* Elementor's global Kit CSS carries a bare `.elementor-kit-6 button{}` reset
   (solid accent fill, 28px pill radius, 20px/40px padding, its own font) that
   this theme has always dodged by rendering interactive controls as `<a>`
   (see sections.php's button() helper) rather than `<button>`. These tabs are
   the first real `<button>` elements in the theme, so they're the first to
   collide with it — match the kit rule's specificity (class + element) with
   `button.rx-legal__tab` and `!important` every property it sets, rather than
   relying on source order, which this theme's own reset notes are unreliable. */
button.rx-legal__tab {
	appearance: none !important;
	font-family: inherit !important;
	font-size: var(--rx-fs-xs) !important;
	font-weight: 600 !important;
	padding: 9px 16px !important;
	border-radius: var(--rx-r-pill, 999px) !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background-color: rgba(255, 255, 255, 0.04) !important;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.02em;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 140ms, color 140ms, border-color 140ms, transform 140ms;
}
button.rx-legal__tab:hover { color: #fff; border-color: rgba(255, 255, 255, 0.24); }
button.rx-legal__tab.is-active {
	background-color: rgba(220, 79, 44, 0.22) !important;
	border-color: rgba(220, 79, 44, 0.5);
	color: #fff;
}

/* ── Count line ── */
.rx-legal__count {
	margin: 0 0 var(--rx-s-3);
	font-size: var(--rx-fs-sm);
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}
.rx-legal__count strong { color: var(--rx-orange-300, #F08566); font-weight: 700; }

/* ── Document grid ── */
.rx-legal__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rx-s-3);
}

.rx-legal__doc {
	display: flex;
	flex-direction: column;
	padding: var(--rx-s-3) var(--rx-s-3) var(--rx-s-3);
	border-radius: var(--rx-r-lg);
	transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.rx-legal__doc:hover {
	border-color: rgba(240, 133, 102, 0.35);
	transform: translateY(-2px);
	box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 32px -10px rgba(220, 79, 44, 0.3);
}
.rx-legal__doc[hidden] { display: none; }

.rx-legal__doc-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--rx-s-2);
	border-radius: var(--rx-r-md);
	background: rgba(220, 79, 44, 0.14);
	color: var(--rx-orange-300);
	flex-shrink: 0;
}
.rx-legal__icon { width: 22px; height: 22px; }

.rx-legal__doc-body { flex: 1; }

.rx-legal__doc-cat {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(240, 133, 102, 0.85);
	margin-bottom: 6px;
}

.rx-legal__doc-title {
	margin: 0 0 6px;
	font-size: var(--rx-fs-md);
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
}

.rx-legal__doc-desc {
	margin: 0 0 10px;
	font-size: var(--rx-fs-sm);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
}

.rx-legal__doc-meta {
	display: inline-block;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
}

.rx-legal__doc-actions {
	display: flex;
	gap: 8px;
	margin-top: var(--rx-s-3);
}
.rx-legal__doc-actions .rx-btn {
	flex: 1;
	justify-content: center;
	padding: 10px 14px;
	font-size: var(--rx-fs-sm);
}
/* Same Elementor `.elementor-kit-6 button{}` collision as the category tabs
   above — re-declare what the kit rule clobbers on this native <button>. */
button.rx-legal__view {
	appearance: none !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	background-color: rgba(255, 255, 255, 0.04) !important;
	border-radius: var(--rx-r-pill) !important;
	padding: 10px 14px !important;
	cursor: pointer;
}
button.rx-legal__view:hover { background-color: rgba(255, 255, 255, 0.08) !important; }

.rx-legal__empty {
	text-align: center;
	font-size: var(--rx-fs-md);
	color: rgba(255, 255, 255, 0.55);
	padding: var(--rx-s-5) 0;
}

.rx-legal__doc mark {
	background: rgba(240, 133, 102, 0.28);
	color: #fff;
	border-radius: 3px;
	padding: 0 1px;
}

/* ── Inline view modal ── */
.rx-legal-modal {
	position: fixed;
	inset: 0;
	z-index: var(--rx-z-modal, 1000);
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.rx-legal-modal[hidden] { display: none; }

.rx-legal-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 8, 18, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.rx-legal-modal__panel {
	position: relative;
	z-index: 1;
	width: min(920px, 100%);
	height: min(86vh, 1100px);
	display: flex;
	flex-direction: column;
	border-radius: var(--rx-r-xl);
	overflow: hidden;
	box-shadow: var(--rx-shadow-lg);
	transform: translateY(12px) scale(0.98);
	opacity: 0;
	transition: transform 260ms var(--rx-ease-out), opacity 260ms var(--rx-ease-out);
}
.rx-legal-modal.is-open .rx-legal-modal__panel {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.rx-legal-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rx-s-2);
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}
.rx-legal-modal__title {
	margin: 0;
	font-size: var(--rx-fs-md);
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
}
.rx-legal-modal__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.rx-legal-modal__download {
	padding: 8px 16px;
	font-size: var(--rx-fs-sm);
}
button.rx-legal-modal__close {
	appearance: none !important;
	font-family: inherit !important;
	background-color: rgba(255, 255, 255, 0.06) !important;
	border-radius: 50% !important;
	padding: 0 !important;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 140ms, transform 140ms;
}
button.rx-legal-modal__close:hover { background-color: rgba(255, 255, 255, 0.14) !important; transform: rotate(90deg); }

.rx-legal-modal__body {
	flex: 1;
	background: #fff;
}
.rx-legal-modal__frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
	.rx-legal__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.rx-legal__grid { grid-template-columns: 1fr; }
	.rx-legal__tools { top: 64px; }
	.rx-legal-modal__panel { height: 90vh; }
	.rx-legal-modal__title { font-size: var(--rx-fs-sm); }
}

@media (prefers-reduced-motion: reduce) {
	.rx-legal__doc,
	.rx-legal-modal__panel {
		transition: none !important;
	}
}