/*
 * EDM Academy — login-protected content area styles.
 *
 * Extracted 1:1 from the approved click-through mockup (edm-academy-mockup.html).
 * Loaded conditionally via `wp_enqueue_style` for academy templates only — see
 * functions.php for the load conditions.
 *
 * @package mitsubishi-electric-europe-b-v-wordpress-theme-v2-0
 * @since 2.1.0
 */

/* ==========================================================================
   SVG Logo color tokens (used by the inline Mitsubishi mark in the mainbar)
   ========================================================================== */

.lr { fill: #FF0000; }
.ld { fill: #231F20; }
.lg { fill: #7E8081; }
.lg2 { fill: #828282; }

/* ==========================================================================
   Topstripe — "logged in" indicator bar with user info & logout
   ========================================================================== */

.edm-topstripe {
	background: #f7f7f5;
	border-bottom: 1px solid #ececec;
}

.edm-topstripe-inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 12px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: #555;
}

.edm-topstripe__label {
	letter-spacing: 0.3px;
}

.edm-topstripe__meta {
	display: flex;
	align-items: center;
	gap: 18px;
}

.edm-topstripe__meta .sep {
	color: #ccc;
}

.edm-topstripe__meta .name,
.edm-topstripe__meta .role {
	color: #1a1a1a;
}

.edm-topstripe__meta .role {
	font-weight: 500;
}

.edm-topstripe__meta .logout {
	color: #f50f10;
	font-weight: 500;
	text-decoration: none;
}

.edm-topstripe__meta .logout:hover {
	color: #1a1a1a;
}

/* ==========================================================================
   Mainbar — logo + horizontal nav + inline language switch
   ========================================================================== */

.edm-mainbar {
	background: white;
}

.edm-mainbar-inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 28px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.edm-mainlogo {
	margin: 0;
}

.edm-mainlogo svg {
	width: 380px;
	height: 54px;
	display: block;
}

.edm-mainnav {
	display: flex;
	align-items: center;
	gap: 36px;
	font-size: 18px;
}

.edm-mainnav .nav-link {
	color: #555;
	padding: 8px 0;
	border-bottom: 3px solid transparent;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.edm-mainnav .nav-link:hover {
	color: #f00;
}

.edm-mainnav .nav-link.is-active {
	color: #1a1a1a;
	font-weight: 500;
	border-bottom-color: #FF0000;
}

.edm-mainnav .nav-link.is-active:hover {
	color: #1a1a1a;
}

.edm-mainnav .nav-sep {
	height: 24px;
	width: 1px;
	background: #ddd;
}

.edm-langswitch {
	font-weight: 500;
	font-size: 16px;
}

.edm-langswitch .active {
	color: #1a1a1a;
}

.edm-langswitch .sep {
	color: #ccc;
	margin: 0 6px;
}

.edm-langswitch .other {
	color: #888;
	text-decoration: none;
}

.edm-langswitch .other:hover {
	color: #f00;
}

/* ==========================================================================
   Page head — breadcrumb + H1 + intro + stats counter + search
   ========================================================================== */

.edm-page-head {
	background: white;
	padding: 60px 0 40px;
}

.edm-page-head-inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 30px;
}

.edm-page-head .breadcrumb {
	margin-bottom: 28px;
}

.edm-page-head .top-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 60px;
}

.edm-page-head .top-row .head-text {
	max-width: 720px;
}

.edm-page-head h1 {
	font-size: 48px;
	font-weight: 500;
	margin: 0 0 14px;
	color: #1a1a1a;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.edm-page-head .intro {
	font-size: 18px;
	color: #555;
	margin: 0;
	line-height: 1.6;
}

.edm-page-head .stats {
	text-align: right;
	padding-bottom: 4px;
}

.edm-page-head .stats .num {
	color: #1a1a1a;
	font-size: 36px;
	font-weight: 500;
	line-height: 1;
}

.edm-page-head .stats .lbl {
	color: #888;
	font-size: 14px;
	margin-top: 6px;
}

.edm-page-head .search-box {
	position: relative;
	margin-top: 40px;
}

.edm-page-head .search-box svg.search-icon {
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.edm-page-head .search-box input {
	width: 100%;
	padding: 18px 22px 18px 56px;
	font-size: 16px;
	background: #f7f7f5;
	border: 1px solid #e1e1e1;
	border-radius: 2px;
	font-family: inherit;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.edm-breadcrumb {
	font-size: 14px;
	color: #888;
}

.edm-breadcrumb a {
	color: #888;
	text-decoration: none;
}

.edm-breadcrumb a:hover {
	color: #f00;
}

.edm-breadcrumb .sep {
	color: #ccc;
	margin: 0 8px;
}

.edm-breadcrumb .current {
	color: #1a1a1a;
}

/* ==========================================================================
   Category tabbar — six categories with active indicator
   ========================================================================== */

.edm-category-bar {
	background: white;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
}

.edm-category-bar-inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 30px;
}

.edm-category-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}

.edm-category-tab {
	padding: 26px 12px 22px;
	text-align: center;
	border-bottom: 4px solid transparent;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.edm-category-tab:hover {
	background: #fafafa;
}

.edm-category-tab.is-active {
	border-bottom-color: #FF0000;
	background: #fafafa;
}

.edm-category-tab svg {
	margin: 0 auto 12px;
	display: block;
	color: #666;
}

.edm-category-tab.is-active svg {
	color: #1a1a1a;
}

.edm-category-tab .label {
	font-size: 16px;
	font-weight: 400;
	color: #1a1a1a;
	margin-bottom: 4px;
}

.edm-category-tab.is-active .label {
	font-weight: 500;
}

.edm-category-tab .count {
	font-size: 13px;
	color: #aaa;
}

.edm-category-tab.is-active .count {
	color: #888;
}

/* ==========================================================================
   Filter bar — type pills + sort/language dropdowns
   ========================================================================== */

.edm-filter-bar {
	background: #fafafa;
	padding: 24px 0;
}

.edm-filter-bar-inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 15px;
}

.edm-filter-bar .filter-group {
	display: flex;
	align-items: center;
	gap: 12px;
}

.edm-filter-bar .filter-group .label-text {
	color: #888;
}

.edm-filter-pill {
	background: white;
	padding: 8px 16px;
	border: 1px solid #ddd;
	color: #555;
	border-radius: 2px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: border-color 0.15s ease;
}

.edm-filter-pill:hover {
	border-color: #999;
}

.edm-filter-pill.is-active {
	background: #1a1a1a;
	color: white;
	border-color: #1a1a1a;
	font-weight: 500;
}

.edm-filter-bar .filter-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: #555;
}

.edm-filter-bar .filter-meta .value {
	color: #1a1a1a;
	font-weight: 500;
}

.edm-filter-bar .filter-meta .divider {
	color: #ddd;
}

/* Sort dropdown — borderless native <select> styled to match the mockup
 * "Neueste zuerst ▾" look without bringing in custom-dropdown JS. */
.edm-orderby-form {
	display: flex;
	align-items: center;
	gap: 6px;
}

.edm-orderby-form label {
	color: #888;
	font-size: 14px;
}

.edm-orderby-form select {
	border: none;
	background: transparent;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	padding: 4px 2px;
	appearance: auto;
}

.edm-orderby-form select:focus {
	outline: 2px solid #FF0000;
	outline-offset: 2px;
}

/* View toggle — segmented Kachel/Liste switch in the filter bar. Two anchors
 * sharing a bordered pill; the active segment inverts to the dark fill used by
 * the type pills. */
.edm-view-toggle {
	display: inline-flex;
	border: 1px solid #ddd;
	border-radius: 2px;
	overflow: hidden;
	background: #fff;
}

.edm-view-toggle a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 34px;
	color: #888;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.edm-view-toggle a + a {
	border-left: 1px solid #ddd;
}

.edm-view-toggle a:hover {
	color: #1a1a1a;
	background: #f3f3f3;
}

.edm-view-toggle a.is-active {
	background: #1a1a1a;
	color: #fff;
}

.edm-view-toggle a:focus-visible {
	outline: 2px solid #FF0000;
	outline-offset: -2px;
}

/* ==========================================================================
   Card grid — 4x2 layout used by Mediathek and Favoriten
   ========================================================================== */

.edm-grid-wrap {
	background: #fafafa;
	padding: 16px 0 60px;
}

.edm-grid-inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 30px;
}

.edm-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* ==========================================================================
   List view (?ansicht=liste) — same cards laid out as horizontal rows:
   fixed-width thumbnail on the left, body filling the rest. Reuses every
   .edm-card / .edm-card-thumb / .edm-card-body rule; only the layout flips.
   ========================================================================== */

.edm-card-grid.is-list {
	grid-template-columns: 1fr;
	gap: 14px;
}

.edm-card-grid.is-list .edm-card {
	flex-direction: row;
	align-items: stretch;
}

/* Drop the 4/3 ratio — in a row the thumb takes a fixed width and stretches
   to the body's height. */
.edm-card-grid.is-list .edm-card-thumb {
	aspect-ratio: auto;
	width: 260px;
	flex-shrink: 0;
}

.edm-card-grid.is-list .edm-card-body {
	padding: 18px 24px;
}

/* More horizontal room: let the meta items flow inline instead of the 2-col
   grid used in card view. */
.edm-card-grid.is-list .edm-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

/* Collapse back to stacked cards on narrow viewports so the row doesn't get
   cramped. */
@media (max-width: 600px) {
	.edm-card-grid.is-list .edm-card {
		flex-direction: column;
	}
	.edm-card-grid.is-list .edm-card-thumb {
		width: auto;
		aspect-ratio: 4/3;
	}
	.edm-card-grid.is-list .edm-card-body {
		padding: 18px 18px 16px;
	}
}

.edm-card {
	background: white;
	border: 1px solid #e8e8e8;
	border-radius: 2px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.edm-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
	color: inherit;
}

.edm-card-thumb {
	aspect-ratio: 4/3;
	position: relative;
}

.edm-card-thumb.is-video {
	background: #1a1a1a;
}

.edm-card-thumb.is-pdf {
	background: #ededeb;
}

.edm-card-thumb-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

/* Real image (PDF auto-thumbnail / featured image): leave a 44px stripe for
 * the badges plus 16px breathing room on the other sides, and show the full
 * document via `contain` instead of cropping. */
.edm-card-thumb-bg.is-image {
	inset: 44px 16px 16px 16px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* Video cover — Instagram-style blurred fill. The inline background-image on
 * the element is the shared source; two pseudo layers render it edge-to-edge:
 * `::before` is a blurred, zoomed `cover` backdrop that fills the whole 4/3
 * frame, `::after` lays the sharp `contain` cover on top so a portrait clip is
 * shown in full without cropping. Scoped to .is-video so PDF covers keep the
 * padded `contain` look. */
.edm-card-thumb.is-video .edm-card-thumb-bg.is-image {
	inset: 0;
	overflow: hidden;
}

.edm-card-thumb.is-video .edm-card-thumb-bg.is-image::before,
.edm-card-thumb.is-video .edm-card-thumb-bg.is-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-position: center;
	background-repeat: no-repeat;
}

.edm-card-thumb.is-video .edm-card-thumb-bg.is-image::before {
	background-size: cover;
	filter: blur(18px) brightness(0.65);
	transform: scale(1.15);
}

.edm-card-thumb.is-video .edm-card-thumb-bg.is-image::after {
	background-size: contain;
}

.edm-card-thumb .play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* PDF Cover mock (Mockup-Look mit rotem Stripe + Kicker + Titel + Mini-Logo) */
.edm-card-pdf-cover {
	position: absolute;
	inset: 24px;
	background: white;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 0 1px #e0e0e0;
}

.edm-pdf-cover-stripe {
	height: 3px;
	background: #FF0000;
	width: 32px;
	margin-bottom: 12px;
}

.edm-pdf-cover-kicker {
	font-size: 9px;
	color: #888;
	font-weight: 700;
	letter-spacing: 0.6px;
	margin-bottom: 6px;
}

.edm-pdf-cover-title {
	font-size: 16px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.15;
	margin-bottom: 10px;
}

.edm-pdf-cover-meta {
	font-size: 8px;
	color: #aaa;
	margin-bottom: 8px;
}

.edm-pdf-cover-logo {
	margin-top: auto;
}

/* Card badges */
.edm-badge-type {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #FF0000;
	color: white;
	font-size: 11px;
	padding: 4px 10px;
	letter-spacing: 0.6px;
	font-weight: 700;
	z-index: 1;
}

.edm-badge-quality {
	position: absolute;
	top: 12px;
	right: 52px; /* leave 42px gap for the favorite toggle */
	background: rgba(0, 0, 0, 0.7);
	color: white;
	font-size: 10px;
	padding: 3px 8px;
	letter-spacing: 0.5px;
	font-weight: 700;
}

.edm-badge-langs {
	position: absolute;
	top: 12px;
	right: 52px; /* leave 42px gap for the favorite toggle */
	background: white;
	color: #1a1a1a;
	font-size: 10px;
	padding: 3px 8px;
	border: 1px solid #ddd;
	font-weight: 500;
	z-index: 1;
}

.edm-badge-duration {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: rgba(0, 0, 0, 0.85);
	color: white;
	font-size: 13px;
	padding: 4px 10px;
	font-weight: 500;
}

/* Favorite button overlay (Favoriten screen) */
.edm-fav-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: white;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.edm-fav-button svg {
	transition: transform 0.15s ease;
}

.edm-fav-button:hover svg {
	transform: scale(1.1);
}

/* Favorite toggle button — replaces the static .edm-fav-button when the
 * favorites system is active. Two variants:
 *   .edm-fav-toggle--card    → overlay on a card thumb (heart pill)
 *   .edm-fav-toggle--inline  → flat icon button, used in detail sidebars
 *
 * Active state is driven by data-is-favorite="true"; inactive shows an
 * outlined heart, active shows a filled red heart. */
/* Generic state behavior — applies to every variant. */
.edm-fav-toggle {
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.edm-fav-toggle:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* Icon-only variants (overlay on a card thumb or flat inline icon). The
 * container resets here are kept off the base class so that mixing
 * `.edm-fav-toggle` with `.edm-btn-secondary` (the --btn variant below)
 * doesn't override the surrounding button styles. */
.edm-fav-toggle--card,
.edm-fav-toggle--inline {
	background: white;
	border: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.edm-fav-toggle--card:hover,
.edm-fav-toggle--inline:hover {
	transform: scale(1.08);
}

.edm-fav-toggle--card {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.edm-fav-toggle--inline {
	background: transparent;
	width: 32px;
	height: 32px;
}

/* Full-button variant — used inside detail-page sidebars next to other
 * `.edm-btn-secondary` actions. Keeps the button look; only the icon
 * fill and the visible label switch on data-is-favorite. */
.edm-fav-toggle--btn {
	width: 100%;
}

.edm-fav-toggle--btn .edm-fav-label-remove {
	display: none;
}

.edm-fav-toggle--btn[data-is-favorite="true"] .edm-fav-label-add {
	display: none;
}

.edm-fav-toggle--btn[data-is-favorite="true"] .edm-fav-label-remove {
	display: inline;
}

/* Active state in brand red for the full-button variant. */
.edm-fav-toggle--btn[data-is-favorite="true"] {
	color: #FF0000;
	border-color: #FF0000;
}

/* Icon variants: heart/star SVG — outlined by default, filled red when
 * active. The full-button variant inherits color via `currentColor` from
 * the surrounding button text. */
.edm-fav-toggle--card svg,
.edm-fav-toggle--inline svg {
	fill: none;
	stroke: #888;
	stroke-width: 2;
	transition: fill 0.15s ease, stroke 0.15s ease;
}

.edm-fav-toggle--card[data-is-favorite="true"] svg,
.edm-fav-toggle--inline[data-is-favorite="true"] svg {
	fill: #FF0000;
	stroke: #FF0000;
}

.edm-fav-toggle--card:hover svg,
.edm-fav-toggle--inline:hover svg {
	stroke: #FF0000;
}

.edm-fav-toggle--btn[data-is-favorite="true"] svg {
	fill: #FF0000;
}

/* Share modal — full-screen overlay with darkened backdrop + centered
 * dialog. Built lazily by edm-share.js and re-used. The body class
 * .edm-share-modal-open locks page scroll while the modal is open. */
.edm-share-modal {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 9999;
	font-family: Roboto, Arial, sans-serif;
}

.edm-share-modal.is-visible {
	display: block;
}

body.edm-share-modal-open {
	overflow: hidden;
}

.edm-share-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	animation: edm-share-modal-fade-in 0.18s ease;
}

.edm-share-modal__dialog {
	position: relative;
	width: 480px;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 48px);
	margin: 0 auto;
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
	overflow: hidden;
	animation: edm-share-modal-zoom-in 0.18s ease;
}

@keyframes edm-share-modal-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes edm-share-modal-zoom-in {
	from { opacity: 0; transform: translateY(-50%) scale(0.96); }
	to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

.edm-share-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
}

.edm-share-modal__title {
	font-size: 16px;
	font-weight: 500;
	color: #1a1a1a;
	margin: 0;
}

.edm-share-modal__close {
	background: transparent;
	border: 0;
	padding: 6px;
	margin: -6px;
	color: #888;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
}

.edm-share-modal__close:hover {
	color: #1a1a1a;
	background: #f5f5f5;
}

.edm-share-modal__preview {
	display: flex;
	gap: 16px;
	padding: 20px;
	background: #fafafa;
	border-bottom: 1px solid #eee;
}

.edm-share-modal__cover {
	flex-shrink: 0;
	width: 120px;
	aspect-ratio: 4 / 3;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.edm-share-modal__cover img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.edm-share-modal__preview-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.edm-share-modal__kicker {
	font-size: 11px;
	color: #FF0000;
	font-weight: 700;
	letter-spacing: 0.8px;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.edm-share-modal__post-title {
	font-size: 18px;
	font-weight: 500;
	color: #1a1a1a;
	line-height: 1.3;
	margin-bottom: 8px;
	word-break: break-word;
}

.edm-share-modal__meta {
	font-size: 13px;
	color: #666;
}

.edm-share-modal__url {
	display: flex;
	gap: 8px;
	padding: 16px 20px 20px;
}

.edm-share-modal__url-input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 13px;
	font-family: inherit;
	color: #1a1a1a;
	background: #fafafa;
}

.edm-share-modal__url-input:focus {
	outline: none;
	border-color: #FF0000;
	background: #fff;
}

.edm-share-modal__copy {
	background: #1a1a1a;
	border: 0;
	color: #fff;
	height: 40px;
	padding: 0 16px;
	border-radius: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	transition: background 0.15s ease;
}

.edm-share-modal__copy:hover {
	background: #333;
}

.edm-share-modal__check-icon {
	display: none;
}

.edm-share-modal.is-copied .edm-share-modal__copy {
	background: #2e7d32;
}

.edm-share-modal.is-copied .edm-share-modal__copy-icon {
	display: none;
}

.edm-share-modal.is-copied .edm-share-modal__check-icon {
	display: inline;
}

/* Card body */
.edm-card-body {
	padding: 18px 18px 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.edm-card-kicker {
	font-size: 11px;
	color: #FF0000;
	font-weight: 700;
	letter-spacing: 0.8px;
	margin: 0 0 8px;
}

.edm-card-title {
	font-size: 17px;
	font-weight: 500;
	margin: 0 0 8px;
	line-height: 1.3;
	color: #1a1a1a;
}

.edm-card-desc {
	font-size: 14px;
	color: #666;
	margin: 0 0 16px;
	line-height: 1.5;
	flex: 1;
}

.edm-card-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 12px;
	padding: 12px 0;
	border-top: 1px solid #eee;
	font-size: 12px;
	color: #555;
}

.edm-card-meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.edm-card-meta-item svg {
	flex-shrink: 0;
}

.edm-card-meta-line {
	padding: 10px 0 0;
	border-top: 1px solid #eee;
	font-size: 12px;
	color: #888;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.edm-card-meta-line .fav-time {
	color: #FF0000;
	font-weight: 500;
}

/* ==========================================================================
   Buttons (primary + secondary, used in detail screens and forms)
   ========================================================================== */

.edm-btn-primary {
	background: #FF0000;
	color: white;
	border: none;
	padding: 16px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	border-radius: 2px;
	letter-spacing: 0.3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	transition: background 0.15s ease;
	font-family: inherit;
}

.edm-btn-primary:hover {
	background: #f50f10;
	color: white;
}

.edm-btn-secondary {
	background: white;
	color: #1a1a1a;
	border: 1px solid #1a1a1a;
	padding: 14px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border-radius: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	transition: background 0.15s ease;
	font-family: inherit;
}

.edm-btn-secondary:hover {
	background: #fafafa;
	color: #1a1a1a;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.edm-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 28px;
	margin-top: 50px;
	font-size: 16px;
	color: #888;
}

.edm-pagination a,
.edm-pagination span {
	text-decoration: none;
	color: #888;
}

.edm-pagination .pages {
	display: flex;
	gap: 18px;
}

.edm-pagination .pages a,
.edm-pagination .pages span {
	padding: 4px 8px;
}

.edm-pagination .pages .current {
	color: #1a1a1a;
	font-weight: 500;
	border-bottom: 2px solid #FF0000;
}

.edm-pagination .nav-arrow:hover {
	color: #f00;
}

/* ==========================================================================
   Academy footer — alternate compact / large variants
   ========================================================================== */

.edm-footer {
	background: #dbdbdb;
	color: #1a1a1a;
}

.edm-footer-inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 36px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	flex-wrap: wrap;
	gap: 16px;
}

.edm-footer-legal {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-weight: 300;
}

.edm-footer-legal a {
	color: inherit;
	text-decoration: none;
}

.edm-footer-legal a:hover {
	color: #f00;
}

.edm-footer-legal .sep {
	color: #999;
}

.edm-footer__copy {
	font-weight: 300;
}

/* Large footer variant (Mediathek): "Follow us" + social row + approved-link */
.edm-footer.is-large .edm-footer-inner {
	padding: 60px 30px 30px;
	flex-direction: column;
	align-items: flex-start;
}

.edm-footer.is-large .edm-footer__title {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 24px;
}

.edm-footer.is-large .social-row {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 16px;
}

.edm-footer.is-large .social-row a {
	color: #1a1a1a;
}

.edm-footer.is-large .approved-link {
	margin: 0;
	font-size: 16px;
}

.edm-footer.is-large .approved-link a {
	color: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.edm-footer.is-large .footer-bottom {
	margin-top: 60px;
	padding-top: 28px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	flex-wrap: wrap;
	gap: 16px;
}

/* ==========================================================================
   Detail sidebar (reused by PDF-Detail and Video-Detail screens)
   ========================================================================== */

.edm-detail-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.edm-detail-meta-block {
	background: white;
	border: 1px solid #e1e1e1;
	padding: 28px;
}

.edm-detail-meta-block .kicker {
	font-size: 11px;
	color: #888;
	font-weight: 700;
	letter-spacing: 0.8px;
	margin-bottom: 14px;
}

/* ==========================================================================
   Detail layout — breadcrumb bar, two-column grid, content containers
   ========================================================================== */

.edm-detail-breadcrumb {
	background: white;
	padding: 32px 0 16px;
}

.edm-detail-breadcrumb-inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 30px;
}

.edm-detail-wrap {
	background: #fafafa;
	padding: 32px 0 60px;
}

.edm-detail-inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 30px;
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 36px;
}

.edm-detail-main {
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   PDF cover (large) — Detail screen
   ========================================================================== */

.edm-pdf-cover-container {
	background: white;
	border: 1px solid #e1e1e1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
	min-height: 720px;
}

/* Inline PDF viewer (iframe to the streamer endpoint). Browser-native PDF
 * viewer renders inside; if PDF.js is dropped into assets/vendor/pdfjs/
 * the iframe loads its Web Viewer instead — same container styles work. */
.edm-pdf-viewer {
	background: #525659;
	border: 1px solid #e1e1e1;
	min-height: 900px;
	overflow: hidden;
}

.edm-pdf-viewer iframe {
	display: block;
	width: 100%;
	height: 900px;
	border: 0;
	background: #525659;
}

.edm-pdf-cover-img {
	max-width: 100%;
	max-height: 760px;
	display: block;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Mockup-style fallback if no thumbnail available */
.edm-pdf-cover-fallback {
	background: white;
	width: 480px;
	max-width: 100%;
	min-height: 620px;
	padding: 50px 56px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
}

.edm-pdf-cover-fallback .stripe {
	height: 4px;
	background: #FF0000;
	width: 60px;
	margin-bottom: 24px;
}

.edm-pdf-cover-fallback .kicker {
	font-size: 12px;
	color: #888;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 14px;
}

.edm-pdf-cover-fallback .title {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 12px;
	line-height: 1.1;
	color: #1a1a1a;
}

.edm-pdf-cover-fallback .subtitle {
	font-size: 16px;
	color: #555;
	margin-bottom: 36px;
}

.edm-pdf-cover-fallback .imprint {
	margin-top: auto;
	padding-top: 32px;
	border-top: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.edm-pdf-cover-fallback .imprint .company {
	font-size: 9px;
	color: #888;
	margin-top: 4px;
	letter-spacing: 0.4px;
}

.edm-pdf-cover-fallback .imprint .version {
	font-size: 10px;
	color: #aaa;
}

/* ==========================================================================
   Video player (Detail screen) + chapter list
   ========================================================================== */

.edm-video-player {
	background: #000;
	aspect-ratio: 16/9;
	position: relative;
	overflow: hidden;
}

.edm-video-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Self-hosted video (Plyr) — brand the player in Mitsubishi red.
 * Variables are Plyr 3.7+. */
.edm-video-self-hosted {
	--plyr-color-main: #FF0000;
	--plyr-video-control-color: #fff;
	--plyr-video-control-color-hover: #fff;
	--plyr-video-control-background-hover: #FF0000;
	--plyr-range-fill-background: #FF0000;
	--plyr-control-radius: 2px;
	--plyr-tooltip-background: rgba(0, 0, 0, 0.9);
	--plyr-tooltip-color: #fff;
	background: #000;
	aspect-ratio: 16/9;
	position: relative;
}

.edm-video-self-hosted .plyr,
.edm-video-self-hosted video {
	width: 100%;
	height: 100%;
}

/* Chapter-Markers — small white ticks overlayed on the progress bar */
.edm-chapter-markers {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.edm-chapter-marker {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 2px;
	height: 12px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 1px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.edm-video-chapters {
	background: white;
	border: 1px solid #e1e1e1;
	border-top: none;
	padding: 28px;
}

.edm-chapters-list {
	display: flex;
	flex-direction: column;
}

.edm-chapter-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.edm-chapter-item:last-child {
	border-bottom: none;
}

.edm-chapter-item.is-active {
	background: #fafafa;
	padding-left: 12px;
	padding-right: 12px;
	margin-left: -12px;
	margin-right: -12px;
	border-left: 3px solid #FF0000;
}

.edm-chapter-item .timestamp {
	font-size: 13px;
	font-weight: 500;
	min-width: 50px;
	color: #555;
}

.edm-chapter-item.is-active .timestamp {
	color: #FF0000;
}

.edm-chapter-item .ch-info {
	flex: 1;
}

.edm-chapter-item .ch-title {
	font-size: 14px;
	color: #1a1a1a;
}

.edm-chapter-item.is-active .ch-title {
	font-weight: 500;
}

.edm-chapter-item .ch-desc {
	font-size: 12px;
	color: #888;
	margin-top: 2px;
}

.edm-chapter-item .ch-duration {
	font-size: 12px;
	color: #888;
}

/* ==========================================================================
   Sidebar internals — meta header, properties, language list, tags, related
   ========================================================================== */

.edm-detail-meta-block .meta-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.edm-detail-meta-block .meta-header .kicker-inline {
	font-size: 11px;
	color: #FF0000;
	font-weight: 700;
	letter-spacing: 0.8px;
	margin: 0;
}

.edm-detail-meta-block h1 {
	font-size: 28px;
	font-weight: 500;
	margin: 0 0 12px;
	color: #1a1a1a;
	line-height: 1.2;
}

.edm-detail-meta-block .meta-desc {
	font-size: 14px;
	color: #666;
	margin: 0 0 24px;
	line-height: 1.6;
}

.edm-detail-meta-block .meta-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 4px;
}

.edm-detail-meta-block .meta-actions.is-row {
	flex-direction: row;
	gap: 8px;
}

.edm-detail-meta-block .meta-actions.is-row > * {
	flex: 1;
}

.edm-detail-meta-block .meta-section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid #eee;
}

.edm-props-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 12px;
	font-size: 13px;
}

.edm-props-grid .prop-label {
	color: #888;
	margin-bottom: 3px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.edm-props-grid .prop-value {
	color: #1a1a1a;
	font-weight: 500;
}

.edm-lang-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.edm-lang-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	color: inherit;
	text-decoration: none;
}

.edm-lang-item.is-current {
	background: #fafafa;
	border-left: 3px solid #FF0000;
}

.edm-lang-item .name {
	font-size: 14px;
	color: #555;
}

.edm-lang-item.is-current .name {
	color: #1a1a1a;
	font-weight: 500;
}

.edm-lang-item .status {
	font-size: 12px;
	color: #888;
}

.edm-lang-item .dl-icon {
	color: #888;
}

.edm-tags-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.edm-tag-pill {
	font-size: 12px;
	color: #555;
	background: #f0f0f0;
	padding: 5px 10px;
	text-decoration: none;
}

.edm-tag-pill:hover {
	background: #e6e6e6;
	color: #1a1a1a;
}

.edm-related-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.edm-related-item {
	display: flex;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.edm-related-item:hover .related-title {
	color: #FF0000;
}

.edm-related-item .related-thumb {
	width: 60px;
	height: 44px;
	flex-shrink: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
}

.edm-related-item .related-thumb.is-pdf {
	background-color: #ededeb;
}

.edm-related-item .related-thumb.is-video {
	background-color: #1a1a1a;
}

.edm-related-item .related-thumb .badge-mini {
	position: absolute;
	top: 4px;
	left: 4px;
	background: #FF0000;
	color: white;
	font-size: 8px;
	padding: 1px 4px;
	font-weight: 700;
}

.edm-related-item .related-info {
	min-width: 0;
}

.edm-related-item .related-title {
	font-size: 13px;
	color: #1a1a1a;
	font-weight: 500;
	line-height: 1.3;
	transition: color 0.15s ease;
}

.edm-related-item .related-meta {
	font-size: 11px;
	color: #888;
	margin-top: 3px;
}

/* ==========================================================================
   Profil — Account + Password forms
   ========================================================================== */

.edm-profile-wrap {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.edm-profile-notice {
	padding: 14px 20px;
	border-radius: 2px;
	font-size: 14px;
	font-weight: 500;
}

.edm-profile-notice.is-success {
	background: #e8f5e9;
	color: #1a7f37;
	border-left: 3px solid #1a7f37;
}

.edm-profile-notice.is-error {
	background: #fdecec;
	color: #c91e1e;
	border-left: 3px solid #c91e1e;
}

.edm-profile-block {
	background: white;
	border: 1px solid #e1e1e1;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.edm-profile-block .kicker {
	font-size: 12px;
	color: #888;
	font-weight: 700;
	letter-spacing: 0.8px;
	margin: 0 0 4px;
}

.edm-profile-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 24px;
}

.edm-profile-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.edm-profile-field .label {
	font-size: 13px;
	font-weight: 500;
	color: #1a1a1a;
	letter-spacing: 0.2px;
}

.edm-profile-field input {
	padding: 12px 14px;
	font-size: 15px;
	background: #fafafa;
	border: 1px solid #e1e1e1;
	border-radius: 2px;
	font-family: inherit;
	color: #1a1a1a;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.edm-profile-field input:focus {
	outline: none;
	border-color: #FF0000;
	background: #fff;
}

.edm-profile-field.is-readonly input {
	background: #f3f3f3;
	color: #666;
	cursor: not-allowed;
}

.edm-profile-field .hint {
	font-size: 12px;
	color: #888;
}

.edm-profile-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 4px;
}

/* Stack to one column on narrow viewports */
@media (max-width: 720px) {
	.edm-profile-fields {
		grid-template-columns: 1fr;
	}
	.edm-profile-block {
		padding: 24px;
	}
}

/* ==========================================================================
   Login screen — 2-column hero + credential card
   ========================================================================== */

.edm-login-wrap {
	background: #fafafa;
	min-height: calc(100vh - 110px - 220px); /* mainbar + footer */
	padding: 100px 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.edm-login-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 1380px;
	width: 100%;
	padding: 0 30px;
	gap: 80px;
	align-items: start;
}

.edm-login-hero {
	padding-top: 40px;
}

.edm-login-hero__kicker {
	display: inline-block;
	font-size: 12px;
	color: #FF0000;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.edm-login-hero__title {
	font-size: 56px;
	font-weight: 500;
	margin: 0 0 24px;
	color: #1a1a1a;
	letter-spacing: -0.5px;
	line-height: 1.05;
}

.edm-login-hero__teaser {
	font-size: 18px;
	color: #555;
	margin: 0 0 36px;
	line-height: 1.6;
}

.edm-login-features {
	list-style: none;
	padding: 0;
	margin: 40px 0 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.edm-login-features > li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.edm-login-features .icon {
	width: 36px;
	height: 36px;
	background: white;
	border: 1px solid #e1e1e1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.edm-login-features .head {
	font-size: 15px;
	font-weight: 500;
	color: #1a1a1a;
	margin-bottom: 4px;
}

.edm-login-features .body {
	font-size: 14px;
	color: #666;
}

/* Credential card on the right */
.edm-login-card {
	background: white;
	border: 1px solid #e8e8e8;
	padding: 48px 48px 40px;
	display: flex;
	flex-direction: column;
}

.edm-login-card__title {
	font-size: 28px;
	font-weight: 500;
	margin: 0 0 8px;
	color: #1a1a1a;
}

.edm-login-card__subtitle {
	font-size: 14px;
	color: #888;
	margin: 0 0 32px;
}

.edm-login-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 22px;
}

.edm-login-field .label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.edm-login-field .label {
	font-size: 13px;
	font-weight: 500;
	color: #1a1a1a;
	letter-spacing: 0.2px;
}

.edm-login-field .forgot {
	font-size: 13px;
	color: #f50f10;
	text-decoration: none;
	font-weight: 500;
}

.edm-login-field .forgot:hover {
	color: #1a1a1a;
}

.edm-login-field input {
	width: 100%;
	padding: 14px 16px;
	font-size: 15px;
	background: #fafafa;
	border: 1px solid #e1e1e1;
	border-radius: 2px;
	font-family: inherit;
	color: #1a1a1a;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.edm-login-field input:focus {
	outline: none;
	border-color: #FF0000;
	background: #fff;
}

.edm-login-remember {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
	font-size: 14px;
	color: #555;
	cursor: pointer;
}

.edm-login-remember input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
	accent-color: #FF0000;
}

.edm-login-submit {
	width: 100%;
	padding: 16px;
	font-size: 16px;
}

.edm-login-divider {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #eee;
	font-size: 13px;
	color: #666;
	text-align: center;
}

.edm-login-divider .request-access {
	color: #1a1a1a;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.edm-login-divider .request-access:hover {
	color: #FF0000;
}

.edm-login-note {
	background: #fafafa;
	padding: 16px 18px;
	margin-top: 28px;
	border-left: 3px solid #FF0000;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 12px;
	color: #555;
	line-height: 1.5;
}

.edm-login-note svg {
	flex-shrink: 0;
	margin-top: 1px;
}

/* Collapse to single column at narrow widths */
@media (max-width: 960px) {
	.edm-login-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.edm-login-hero {
		padding-top: 0;
	}
	.edm-login-hero__title {
		font-size: 40px;
	}
	.edm-login-card {
		padding: 32px 28px 28px;
	}
}

/* ============================================================
   Access request page (/zugang-anfordern/)
   Same login header — single-column centered card.
============================================================ */

.edm-access-page {
	min-height: calc(100vh - 120px);
	background: #f5f5f5;
	padding: 48px 20px;
	font-family: Roboto, Arial, sans-serif;
	box-sizing: border-box;
}

.edm-access-wrap {
	max-width: 640px;
	margin: 0 auto;
}

.edm-access-card {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	padding: 48px 48px 40px;
}

.edm-access-card--thanks {
	text-align: center;
	padding: 56px 48px 48px;
}

.edm-access-icon {
	margin-bottom: 16px;
}

.edm-access-title {
	font-size: 26px;
	font-weight: 500;
	color: #1a1a1a;
	margin: 0 0 12px;
	line-height: 1.25;
}

.edm-access-lead {
	color: #555;
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 28px;
}

.edm-access-error {
	background: #fbeaea;
	border-left: 3px solid #c62828;
	color: #c62828;
	padding: 12px 14px;
	margin: 0 0 24px;
	font-size: 14px;
	border-radius: 3px;
}

.edm-access-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.edm-access-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.edm-access-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.edm-access-label {
	font-size: 13px;
	font-weight: 500;
	color: #1a1a1a;
}

.edm-access-label .req {
	color: #FF0000;
}

.edm-access-field input[type="text"],
.edm-access-field input[type="email"],
.edm-access-field input[type="tel"],
.edm-access-field select,
.edm-access-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	color: #1a1a1a;
	background: #fff;
	transition: border-color 0.15s ease;
}

.edm-access-field input:focus,
.edm-access-field select:focus,
.edm-access-field textarea:focus {
	outline: none;
	border-color: #FF0000;
}

.edm-access-field textarea {
	resize: vertical;
	min-height: 96px;
	font-family: inherit;
}

.edm-access-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.edm-access-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: #555;
	line-height: 1.5;
}

.edm-access-consent input[type="checkbox"] {
	margin-top: 3px;
	accent-color: #FF0000;
	flex-shrink: 0;
}

.edm-access-consent a {
	color: #FF0000;
	text-decoration: underline;
}

.edm-access-consent .req {
	color: #FF0000;
}

.edm-access-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 8px;
}

.edm-access-actions .edm-btn-primary {
	min-width: 200px;
}

.edm-access-cancel {
	color: #666;
	text-decoration: none;
	font-size: 14px;
}

.edm-access-cancel:hover {
	color: #1a1a1a;
}

.edm-access-back {
	margin: 32px 0 0;
}

/* Responsive: collapse two-column rows on narrow viewports. */
@media (max-width: 640px) {
	.edm-access-card {
		padding: 32px 24px 28px;
	}
	.edm-access-card--thanks {
		padding: 40px 24px 32px;
	}
	.edm-access-row {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.edm-access-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.edm-access-actions .edm-btn-primary {
		width: 100%;
	}
	.edm-access-cancel {
		text-align: center;
	}
}