:root{
	--mfrc-red: #d22730;
	--mfrc-purple-600: #5a1c76;
	--mfrc-purple-100: #f6eefc;
	--mfrc-teal-blue: #287f8e;    /* teal accent from the logo */
	--mfrc-teal-ink: #0f4e55;     /* readable text on light teal bg */
	--mfrc-teal-bg: #e9f4f3;      /* very light teal for active bg */
	--sidebar-bg: #f8f9fa;        /* gray background for sidebar */
	--mfrc-gray-050: #fafbfc;
	--mfrc-gray-100: #f4f5f7;
	--mfrc-gray-200: #f1f2f5;
	--mfrc-gray-300: #e6e6e6;
	--orange: #e06a2a;    /* CTA border */
}

.logo {
	background: #d22730;
	padding: 10px;
}

/* ===== Top navbar (purple) ===== */
.navbar-red{ background: var(--mfrc-red); }
.navbar-red .nav-link,
.navbar-red .navbar-brand{
	color:#fff; font-weight:600; letter-spacing:.3px; text-transform:uppercase;
}
.navbar-red .nav-link:hover,
.navbar-red .nav-link:focus{ color:#fff; opacity:.5; }
.navbar-red .nav-link.active{ color:#fff; background:rgba(255,255,255,.12); border-radius:.5rem; }


/*  ===== Sidebar base styles ===== */
.sidebar .menu-card{ background:#fff; border:1px solid var(--mfrc-gray-300); border-radius:.5rem; }

.sidebar .menu-header{
	/* Faux dropdown header shown only on mobile */
	display:flex; align-items:center; justify-content:space-between; gap:.75rem;
	padding:.8rem 1rem; font-weight:600; border-bottom:1px solid var(--mfrc-gray-300);
	cursor: pointer;
}
.sidebar .chev{ transition: transform .2s ease; }
.sidebar.mobile-open .chev{ transform: rotate(180deg); }

/* Container holding the list items */
.menu-list{ display:block; }
@media (max-width: 767.98px){
	/* On mobile, start collapsed */
	.sidebar:not(.mobile-open) .menu-list{ display:none; }
}

/* Menu item */
.sidebar .menu-item{
	/* Keep a simple, flat list look (no list-group dependence) */
	display:flex; align-items:center; gap:.55rem;
	padding:.65rem .9rem; color:#222; text-decoration:none;
	border-top:1px solid var(--mfrc-gray-300); background:#fff; position:relative;
}
.sidebar .menu-item:first-child{ border-top:0; }
.sidebar .menu-item .bi{ opacity:.8; }
.sidebar .menu-item:hover{ background: var(--mfrc-gray-100); }

/* A) Teal highlight (recommended) */
.sidebar .menu-item.active{
	background: var(--mfrc-teal-bg);
	color: var(--mfrc-teal-ink);
	font-weight: 600;
}
.sidebar .menu-item.active::before{
	content:""; position:absolute; inset:0 auto 0 0; width:4px;
	background: var(--mfrc-teal-blue); border-radius:4px 0 0 4px;
}
.sidebar .menu-item.active .bi{ color: var(--mfrc-teal-blue); opacity:1; }

/* B) Teal outline (ultra light) */
.sidebar.teal-outline .menu-item.active{
	background:#fff; color:#222; font-weight:600; box-shadow: inset 0 0 0 2px var(--mfrc-teal-blue);
}
.sidebar.teal-outline .menu-item.active .bi{ color: var(--mfrc-teal-blue); }

/* C) Gray bg + purple ink (no extra color blocks) */
.sidebar.gray-active .menu-item.active{
	background: var(--mfrc-gray-100); color: var(--mfrc-red); font-weight:600;
}

/* ===== Header actions (My Profile / Logout) ===== */
.header-actions{
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Base button */
.btn-header{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 16px;
	border-radius: 999px; /* pill shape */
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all .15s ease;
	white-space: nowrap;
}

/* My Profile */
.header-actions .btn-header, .mobile-menu .btn-header{
	background: var(--orange);
	color: #fff;
	border-color: var(--orange);
}

.mobile-menu .navigation .btn-header{
	background: var(--mfrc-red);
	color: #fff;
	border-color: var(--mfrc-red);
}

.header-actions .btn-header:hover{
	background: #cf5c23; /* slightly darker orange */
	border-color: #cf5c23;
}

/* Dropdown - Header user */
.avatar-circle {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #E86C2B, #C84D2C);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	flex: 0 0 42px;
}

.header-user-dropdown .user-name {
	font-size: 14px;
	font-weight: 600;
	color: #444;
	line-height: 1.1;
	white-space: nowrap;
}

.header-user-dropdown .user-email {
	font-size: 12px;
	color: #888;
	line-height: 1.1;
	white-space: nowrap;
}

.user-dropdown-menu {
	min-width: 260px;
	border-radius: 12px;
	padding: 6px 0;
	box-shadow: 0 10px 30px rgba(0,0,0,.12);
	border: 1px solid rgba(0,0,0,.06);
	z-index: 10000;
}

.user-dropdown-menu .dropdown-item {
	padding: 10px 14px;
	font-size: 14px;
}

.user-dropdown-menu .dropdown-item:active {
	background-color: rgba(232,108,43,.15);
	color: #222;
}

.mobile-account {
	background: #fff;
	border-radius: 12px;
	padding: 14px 14px;
	border: 1px solid rgba(0,0,0,.06);
	margin-bottom: 14px;
}

.mobile-account-name {
	font-weight: 600;
	color: #333;
	line-height: 1.1;
}

.mobile-account-email {
	font-size: 12px;
	color: #777;
	margin-top: 2px;
}

/* Remove default button styles */
.header-actions form{
	margin: 0;
}
.header-actions button{
	background: none;
}


/* ===== Mobile offcanvas menu sections ===== */
.mobile-menu{
	padding: 8px 6px;
}

.menu-section{
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 14px;
	padding: 12px;
	margin: 10px 0 14px;
}

.menu-section-title{
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #555;
	margin-bottom: 10px;
}

/* Account buttons (full width) */
.mobile-menu .btn-header {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
	border-radius: 12px;
	border: 2px solid transparent;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
	margin-bottom: 10px;
}
.mobile-menu .btn-header:active{ transform: translateY(1px); }

/* Reset form spacing */
.menu-form{ margin: 0; }

/* Navigation links */
.menu-link{
	display: block;
	width: 100%;
	padding: 12px 12px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 800;
	color: #222;
	border: 1px solid rgba(0,0,0,.08);
	background: #fff;
	transition: background .15s ease, border-color .15s ease;
}

.menu-link:hover{
	background: rgba(147,64,56,.06);
	border-color: rgba(147,64,56,.20);
}


/* ===== Mobile dropdown trigger ===== */
/*.mobile-side-trigger{
	background:#fff;
	border:1px solid #dee2e6;
	border-radius:.5rem;
}
.mobile-side-trigger .label{
	font-weight:600;
}*/

/* Hide desktop sidebar on mobile; show on lg+ */
/*@media (max-width: 991.98px){
	.sidebar{ display:none; }
}*/

main{ padding:2rem 0 4rem; }
.hero{ background:linear-gradient(180deg,#f8f3fb,#fff); border-bottom:1px solid #eee; }

/* Purple buttons */
.btn-mfrc {
	font-weight: 600;
	padding: .375rem 1rem;
	transition: background .2s ease-in-out;
}
.btn-mfrc.r2 {
	border-radius: 2rem;
}
.btn-mfrc.purple {
	background-color: var(--mfrc-red);
	color: #fff;
}
.btn-mfrc.purple:hover,
.btn-mfrc.purple:focus {
	background-color: #D32F2F; /* un tono más oscuro */
	color: #fff;
}
.btn-mfrc.teal-blue {
	background-color: var(--mfrc-teal-blue);
	color: #fff;
}
.btn-mfrc.teal-blue:hover,
.btn-mfrc.teal-blue:focus {
	background-color: #1f5e65; /* un tono más oscuro */
	color: #fff;
}

/* Required field asterisk */
.req:after {
	content:'*';
}

/* Custom popover styling */
.popover {
	background-color: #ffffff;            /* white background for clean look */
	border: 2px solid var(--mfrc-red); /* use your purple brand color */
	border-radius: 12px;                  /* softer rounded corners */
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* subtle shadow */
	max-width: 320px;
	padding: 0;
	overflow: hidden;
}

/* Header bar inside popup */
.popover-header {
	background-color: var(--mfrc-red);
	color: #fff;
	font-weight: 600;
	padding: 10px 14px;
	border-bottom: none;
	font-size: 0.95rem;
}

/* Body styling */
.popover .popover-body {
	color: #333;
	padding: 14px 16px;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Contact links */
.popover .popover-body a:not(.btn):not(.btn-mfrc-purple) {
	color: var(--mfrc-red);
	font-weight: 500;
	text-decoration: none;
}
.popover .popover-body a:hover {
	text-decoration: underline;
}


/* ---------- Link style to match brand ---------- */
.link-purple{ color: var(--mfrc-purple-600); text-decoration: none; }
.link-purple:hover{ color: var(--mfrc-red); text-decoration: underline; }

/* ---------- Backdrop polish ---------- */
.modal-backdrop.show{ opacity:.35; }
.modal-backdrop{ backdrop-filter: blur(2px); }

/* ---------- Modal look & feel ---------- */
.modern-modal .modal-content{
	border-radius: 1rem;
	overflow: hidden;
}
.bg-gradient-purple{
	background: linear-gradient(135deg, var(--mfrc-red), var(--mfrc-purple-600));
	color:#fff;
}
.modern-modal .modal-title{ letter-spacing:.2px; }
.modern-modal .form-control{
	border-radius:.65rem;
	padding:.625rem .75rem;
}
.modern-modal .form-control:focus{
	border-color: var(--mfrc-purple-600);
	box-shadow: 0 0 0 .25rem rgba(90,28,118,.2);
}

/* ---------- Mobile breathing room ---------- */
@media (max-width: 575.98px){
	.modern-modal .modal-dialog{ margin:.75rem; }
}



/* --- Forgot link: visual + accessibility --- */
.modern-modal .modal-body .modal-actions .forgot-link{
	/* Use brand color, look clickable but clean */
	color: var(--mfrc-purple-600);
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;              /* keeps underline area tight */
	align-items: center;
	gap: .35rem;
	line-height: 1.3;
}

/* Hover/active feedback */
.modern-modal .modal-body .modal-actions .forgot-link:hover{
	color: var(--mfrc-red);
	text-decoration: underline;
}

/* Keyboard focus ring for accessibility */
.modern-modal .modal-body .modal-actions .forgot-link:focus{
	outline: none;
	box-shadow: 0 0 0 .2rem rgba(90,28,118,.25);
	border-radius: .5rem;
}

/* Mobile spacing: when it wraps under the button */
@media (max-width: 575.98px){
	.modern-modal .modal-body .modal-actions{
		gap: .6rem 1rem;
	}
	.modern-modal .modal-body .modal-actions .forgot-link{
		margin-left: .125rem;
	}
}

/* If other globals (e.g., .popover .popover-body a) override links,
   this increases specificity without !important. Place this AFTER those rules. */
.modern-modal .modal-body .modal-actions a.forgot-link{
	color: var(--mfrc-purple-600);
}


/* Categories and events in Calendar */
.bi-caret-down-fill {
	transform: rotate(0deg);
	transition: transform 0.8s linear;
}
.bi-caret-down-fill.open {
	transform: rotate(180deg);
	transition: transform 0.8s linear;
}

.category_header {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	background-color: #e6e6e6;
	padding: 7px;
	border-radius: 2px;
	color: #141414;
}
.category_header:not(:first-child) {
	margin-top: 20px;
}
.category_header .total_events {
	font-size: 12px;
	color: #474747;
	font-weight: normal;
}
.category_header.selected {
	background-color: #bee3eb;
}
.category_header .arrow {
	float: right;
	font: normal normal normal 24px/1 Inter;
}

.content-list {
	margin-bottom: 20px;
	background-color: #bee3eb;
}
.content-list .row {
	margin: 0;
	padding-top: 15px;
}
.content-list .box {
	background-color: #FFF;
	padding: 10px;
	border-radius: 5px;
}

.category-content .row {
	padding: 0;
}

.content-list .button a {
	border-radius: 0;
}
.category_message {
	font-size: 14px;
	font-weight: bold;
}

#calendar {
	color: #000;
}
#calendar .title
{
	font-size: 18px;
	font-weight: 700;
}
#calendar .title a {
	color: #000;
	text-decoration: none;
}
#calendar .subtitle
{
	font-size: 15px;
	font-weight: 500;
}
#calendar .subtitle a {
	color: #000;
	text-decoration: none;
}
#calendar .description
{
	font-size: 13px;
	font-weight: 400;
}
#calendar .date {
	font-size: 11px;
	font-weight: 700;
}

.event-info h5 {
	border-bottom: 2px solid #ddd;
	padding-bottom: 5px;
}

.event-info .card {
	background: #fff;
	border-left: 4px solid var(--bs-primary);
}


/* Base look for the control link */
a.expand-all,
a.extras-on-demand-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .5rem;
	border-radius: .5rem;
	text-decoration: none;
	font-size: .875rem;                /* ~small */
	line-height: 1.25;
	color: var(--bs-primary);
	background: transparent;
	transition: background-color .15s ease, color .15s ease;
}

/* Hover/focus */
a.expand-all:hover,
a.expand-all:focus,
a.extras-on-demand-link:hover,
a.extras-on-demand-link:focus {
	text-decoration: underline;
	background-color: rgba(var(--bs-primary-rgb, 13,110,253), .06);
	outline: 0;
}

/* Expanded state (after clicking expand all) */
a.expand-all.is-expanded,
a.extras-on-demand-link.is-expanded {
	color: var(--bs-primary);
	background-color: rgba(var(--bs-primary-rgb, 13,110,253), .10);
}

/* Optional: make it look more like a subtle button */
a.expand-all.btn-ish,
a.extras-on-demand-link.btn-ish {
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

/* Icon sizing */
a.expand-all .scc-icon,
a.extras-on-demand-link .scc-icon {
	font-size: 1rem;
	line-height: 1;
}


/* ===== Extras on Demand - Show less | Delete ===== */
.object-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.object-title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.object-card-actions {
	padding-top: 4px;
}

.object-actions {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.object-action-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 11px;
	border-radius: 999px;
	background: #f9fafb;
	color: #374151;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 1px solid #e5e7eb;
	transition: all .15s ease;
}

.object-action-chip:hover,
.object-action-chip:focus {
	background: #f3f4f6;
	color: #111827;
	border-color: #d1d5db;
	text-decoration: none;
	outline: none;
}
.object-action-delete {
	display: inline-flex;
	align-items: center;
	padding: 0;
	background: transparent;
	border: 0;
	color: #dc2626;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease;
}

.object-action-delete:hover,
.object-action-delete:focus {
	color: #b91c1c;
	text-decoration: underline;
	outline: none;
}

.object-card-body {
	clear: both;
}

@media (max-width: 767px) {
	.object-card-header {
		display: block;
	}

	.object-card-actions {
		margin-top: 10px;
		justify-content: flex-start;
	}

	.object-actions {
		gap: 10px;
	}
}




/* ===== Compact theme + highlights ===== */
.sessions-compact{
	--pad-y:.35rem; --pad-x:.6rem; --gap:.55rem; --radius:.6rem;
	--line:#e9ecef; --line-strong:#d9dee3; --muted:#6c757d; --ink:#212529; --chip-bg:#f8f9fa;
	--accent:#0d6efd;          /* primary accent */
	--accent-info:#0dcaf0;     /* info color for date & time */
	--accent-success:#198754;  /* success for spots available */
	--accent-amber:#ffbf00;    /* waitlist yellow */
	--accent-amber-border:#ffb21f;

	/* Fixed widths for chips */
	--date-w: 150px;
	--time-w: 150px;
	font-size:.9rem;
}

.session_group{ margin-bottom:.7rem; }
.session_group .accordion-button{ padding:.45rem .6rem; font-size:.92rem; }
/* accordion-body uses px-2 py-0 directly in HTML */

/* ===== Session card (visible and compact) ===== */
.event-row{
	position:relative;
	display:grid;
	grid-template-columns: 1fr max-content; /* event info | chip-availability */
	gap: var(--gap);
	padding: .65rem .7rem;
	margin: .5rem .2rem;
	border:1px solid var(--line-strong);
	border-radius: var(--radius);
	background:#fff;
	box-shadow: 0 1px 0 rgba(16,24,40,.06);
	transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.event-row::before{
	content:"";
	position:absolute; left:0; top:0; bottom:0;
	width:3px; border-radius: var(--radius) 0 0 var(--radius);
	background:transparent;
	transition: background-color .15s ease, width .15s ease;
}
.event-row:hover{ background:#fbfdff; box-shadow: 0 0 0 2px #eaf1ff; }
.event-row.selected{
	border-color: color-mix(in srgb, var(--accent) 28%, #ffffff);
	box-shadow: inset 3px 0 0 var(--accent), 0 0 0 2px #e7f1ff;
}
.event-row.selected::before{ background:var(--accent); width:4px; }

.event-title{ font-weight:700; font-size:1rem; color:#1f2937; }
.event-meta{ font-size:.82rem; color:var(--muted); }

/* ===== Chips (fixed width, colored) ===== */
.chip{
	display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
	font-size:.8rem; font-weight:600; letter-spacing:.1px;
	padding:.18rem .55rem; border-radius:999px;
	background:var(--chip-bg); border:1px solid var(--line); color:#223;
}
.chip i{ font-size:.95em; opacity:.9; }

/* Date and time chips share same style and fixed width */
.chip-date,
.chip-time{
	justify-content:center; text-align:center;
	background: color-mix(in srgb, var(--accent-info) 16%, #f3fcff);
	border-color: color-mix(in srgb, var(--accent-info) 45%, #ffffff);
	color: #0b5561;
}
.chip-date{ inline-size: var(--date-w); }
.chip-time{ inline-size: var(--time-w); }

/* Availability chip (green) */
.chip-availability{
	justify-self:end;
	background: color-mix(in srgb, var(--accent-success) 18%, #effaf3);
	border-color: color-mix(in srgb, var(--accent-success) 40%, #ffffff);
	color: #0f5a35;
}

/* Waitlist chip (always yellow) */
.chip-waitlist{
	background: color-mix(in srgb, var(--accent-amber) 32%, #fff8e6);
	border-color: var(--accent-amber-border);
	color: #7a5200;
}

/* Closed chip (gray) */
.chip-closed {
	background: color-mix(in srgb, #6c757d 20%, #f8f9fa); /* muted gray bg */
	border-color: #6c757d;
	color: #495057;
}

/* Full chip (red) */
.chip-full {
	background: color-mix(in srgb, #dc3545 22%, #fff0f1); /* red bg */
	border-color: #dc3545;
	color: #842029;
}

/* Info chip (light blue) */
.chip-info {
	background: color-mix(in srgb, #0dcaf0 18%, #f3fcff); /* light cyan bg */
	border-color: color-mix(in srgb, #0dcaf0 45%, #ffffff); /* border accent */
	color: #055160; /* dark cyan text */
}

/* People chips */
.people-group{
	grid-column: 1 / -1;
	display:flex; flex-wrap:wrap; gap:.5rem .6rem;
	padding-top:.55rem;
	border-top:1px dashed var(--line-strong);
}
.person-chip{
	display:inline-flex; align-items:center; gap:.35rem;
	padding:.22rem .55rem; border-radius:999px;
	background:#fff; border:1px solid var(--line);
	font-size:.86rem;
}
.person-chip .form-check-input{ margin:0; }

@media(max-width:576px){
	.event-row{ grid-template-columns: 1fr; }
	.chip-availability{ justify-self:start; }
	.chip-date{ inline-size: 100%; }
	.chip-time{ inline-size: 100%; }
	.chip-availability, .chip-waitlist, .chip-closed, .chip-full, .chip-info{ inline-size: 100%; justify-content: center; }
}


/* =========================
   Events list (additions only)
   ========================= */

/* Grid wrapper for the list (1 col, gap) */
.events-list{
	display: grid;
	gap: 20px;
}

/* Card layout: date rail | content | CTA */
.event-card{
	display: grid;
	grid-template-columns: 110px 1fr 180px; /* rail | body | button */
	align-items: stretch;
	overflow: hidden;
	border: 0;
	border-left: 6px solid var(--mfrc-red); /* brand accent */
	background: #fff;
	box-shadow: 0 1px 8px rgba(16,24,40,.06);
	border-radius: .5rem;
	transition: box-shadow .15s ease, transform .15s ease;
}
.event-card:hover{
	/* small lift on hover */
	box-shadow: 0 6px 18px rgba(16,24,40,.10);
	transform: translateY(-1px);
}

/* Left vertical rail for dates */
.event-card .event-date{
	/* vertical rail with subtle gradient */
	background: linear-gradient(180deg, var(--mfrc-purple-100), #fff);
	padding: 10px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}
.event-card .date-block{
	/* compact date tile */
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border: 2px solid var(--mfrc-red);
	border-radius: 12px;
	line-height: 1;
	background: #fff;
}
.event-card .date-day{ font-weight: 700; font-size: 22px; }
.event-card .date-mon{
	font-weight: 600; font-size: 12px;
	text-transform: uppercase; letter-spacing: .04em; color:#5b5b5b;
}
.event-card .date-sep{ font-weight:700; color:#8c8c8c; }

/* Main body */
.event-card .card-body{
	padding: 1rem 1rem;
}
.event-card .event-title{
	/* reuse brand blacks from your file */
	font-weight: 700; font-size: 1rem; color: #1f2937;
	margin-bottom: .25rem;
}
.event-card .event-title a{
	text-decoration: none; color: inherit;
}
.event-card .event-title a:hover{ text-decoration: underline; }

.event-card .event-subtitle{
	font-weight: 500; font-size: 0.9rem; color: #1f2937;
	margin: .35rem 0;
}

/* Small meta row with icons */
.event-card .event-meta{
	/* keep in-line, wrap when needed */
	display: flex; flex-wrap: wrap; gap: .75rem 1rem;
	font-size: .875rem; color: #6c757d;
	margin-bottom: .35rem;
}
.event-card .event-meta i{ opacity:.85; }

.event-card .event-meta a{
	color: var(--mfrc-red);
	text-decoration: none;
}
.event-card .event-meta a:hover{
	text-decoration: underline;
}

/* Chips area inside body (re-uses your .chip* classes) */
.event-card .chips{
	display: flex; flex-wrap: wrap; gap: .35rem .5rem;
}

/* Right CTA column */
.event-card .event-cta{
	display: flex; align-items: center; justify-content: center;
	padding: 1rem; background: #fff;
	border-left: 1px solid rgba(0,0,0,.06);
}

/* Compact pill shown when the current user is registered */
.event-status {
	/* base look */
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .25rem .55rem;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1;
}

/* Registered variant: purple outline + soft bg using your variables */
.event-status.registered{
	color: var(--mfrc-red);
	background: color-mix(in srgb, var(--mfrc-red) 10%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--mfrc-red) 55%, #ffffff);
}

/* Optional icon size (Bootstrap Icons) */
.event-status .bi{
	font-size: 1rem;
}

/* Tagline: subtle, readable, keeps spacing tight under title */
.event-tagline{
	/* muted paragraph under the title */
	margin-top: .25rem;
	margin-bottom: .35rem;
	color: #57606a;         /* neutral ink; reuses your general palette */
	font-size: .95rem;
}

/* Small separation between status + chips row if both exist */
.event-has-status .chips{ margin-top: .45rem; }

/* Optional: reduce gap around meta row when status/tagline are present */
.event-has-status .event-meta{ margin-top: .25rem; margin-bottom: .15rem; }


/* Responsive – stack CTA under body on smaller screens */
@media (max-width: 992px){
	.event-card{ grid-template-columns: 90px 1fr; }
	.event-card .event-cta{
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 1px solid rgba(0,0,0,.06);
	}
}
@media (max-width: 576px){
	.event-card .date-block{ width:58px; height:58px; }
	.event-card .date-day{ font-size:20px; }
}