/**
 * Reva Event Detail — Stylesheet
 *
 * Scoped under .reva-event-detail using BEM naming, matching the
 * conventions and design tokens of assets/css/events-browse.css so
 * the browse grid and this single-event page read as one product.
 *
 * Package: Reva_Social / Event_Detail
 */

.reva-event-detail {
	--reva-coral: #39B7CE;
	--reva-coral-soft: #EAF8FB;
	--reva-ink: #202D2C;
	--reva-ink-soft: #53615F;
	--reva-muted: #7D8885;
	--reva-line: #E3E5E1;
	--reva-pink: #e16cdd;
	font-family: 'Poppins', sans-serif;
	color: var(--reva-ink);
	background: #fff;
}

.reva-event-detail *,
.reva-event-detail *::before,
.reva-event-detail *::after {
	box-sizing: border-box;
}

.reva-event-detail a {
	text-decoration: none;
}

/* -----------------------------
   Hero image
----------------------------- */
.reva-event-detail__hero {
	max-width: 1272px;
	margin: 24px auto 0;
	padding: 0 24px;
}

.reva-event-detail__hero-inner {
	width: 100%;
	/*aspect-ratio: 16 / 9;*/
	overflow: hidden;
	border-radius: 16px;
	background: #DCE3E0;
	max-height: 65vh;
}

.reva-event-detail__hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -----------------------------
   Layout shell
----------------------------- */
.reva-event-detail__layout {
	max-width: 1272px;
	margin: 0 auto;
	padding: 40px 24px 0;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 48px;
	align-items: start;
}

.reva-event-detail__main {
	min-width: 0;
}

/* -----------------------------
   Title bar
----------------------------- */
.reva-event-detail__titlebar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.reva-event-detail__title-group {
	min-width: 0;
}

.reva-event-detail__category-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.reva-event-detail__category-tag {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--reva-coral-soft);
	color: var(--reva-coral-dark);
	font-size: 12.5px;
	font-weight: 600;
}

.reva-event-detail__title {
	margin: 0 0 12px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--reva-ink);
}

.reva-event-detail__byline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--reva-ink-soft);
	font-size: 14.5px;
	font-weight: 500;
}

.reva-event-detail__byline-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.reva-event-detail__byline-avatar--placeholder,
.reva-event-detail__organizer-avatar--placeholder,
.reva-event-detail__lineup-avatar--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--reva-coral);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
}

.reva-event-detail__titlebar-actions {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.reva-event-detail__icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--reva-line);
	background: #fff;
	color: var(--reva-ink-soft);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.reva-event-detail__icon-btn:hover,
.reva-event-detail__icon-btn:focus-visible {
	outline: none;
	background: var(--reva-coral);
	border-color: var(--reva-coral);
	color: #fff;
}

/* -----------------------------
   Meta row (date / venue)
----------------------------- */
.reva-event-detail__meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	padding: 20px 0;
	margin-bottom: 8px;
	border-top: 1px solid var(--reva-line);
	border-bottom: 1px solid var(--reva-line);
}

.reva-event-detail__meta-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 200px;
}

.reva-event-detail__meta-icon {
	flex-shrink: 0;
	color: var(--reva-coral-dark);
	margin-top: 2px;
}

.reva-event-detail__meta-item div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.reva-event-detail__meta-item strong {
	font-size: 15px;
	font-weight: 600;
	color: var(--reva-ink);
}

.reva-event-detail__meta-item span {
	font-size: 13.5px;
	color: var(--reva-ink-soft);
}

/* -----------------------------
   Section shell
----------------------------- */
.reva-event-detail__section {
	padding: 32px 0;
	border-bottom: 1px solid var(--reva-line);
	scroll-margin-top: 24px;
}

.reva-event-detail__section:last-of-type {
	border-bottom: 0;
}

.reva-event-detail__section-title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--reva-ink);
}

.reva-event-detail__prose {
	font-size: 15px;
	line-height: 1.75;
	color: var(--reva-ink-soft);
}

.reva-event-detail__prose p {
	margin: 0 0 14px;
}

.reva-event-detail__prose p:last-child {
	margin-bottom: 0;
}

/* -----------------------------
   Lineup
----------------------------- */
.reva-event-detail__lineup-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.reva-event-detail__lineup-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--reva-line);
	border-radius: 12px;
	background: #F7F9F8;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.reva-event-detail__lineup-card:hover {
	border-color: var(--reva-coral);
	background: var(--reva-coral-soft);
}

.reva-event-detail__lineup-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	font-size: 17px;
}

.reva-event-detail__lineup-card strong {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--reva-ink);
}

.reva-event-detail__lineup-card span {
	display: block;
	font-size: 13px;
	color: var(--reva-ink-soft);
	margin-top: 2px;
}

/* -----------------------------
   Good to know
----------------------------- */
.reva-event-detail__good-to-know {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.reva-event-detail__gtk-card {
	padding: 18px 20px;
	border: 1px solid var(--reva-line);
	border-radius: 12px;
	background: #F7F9F8;
}

.reva-event-detail__gtk-card h3 {
	margin: 0 0 10px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--reva-ink);
}

.reva-event-detail__gtk-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.reva-event-detail__gtk-card li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	color: var(--reva-ink-soft);
}

.reva-event-detail__gtk-card li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--reva-coral);
}

.reva-event-detail__gtk-card p {
	margin: 0;
	font-size: 14px;
	color: var(--reva-ink-soft);
	line-height: 1.6;
}

/* -----------------------------
   Location
----------------------------- */
.reva-event-detail__location strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 6px;
}

.reva-event-detail__location p {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--reva-ink-soft);
	line-height: 1.6;
}

.reva-event-detail__map-link {
	display: inline-block;
}

/* TEC's tribe_get_map_link_html() ships its own "+ Google Map" link
   text baked into the markup. The <a> and href are printed as-is
   (see single-event.php) — only the visible label is swapped here so
   it matches this page's wording, while the real destination URL
   TEC computed stays untouched. */
.reva-event-detail__map-link a {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--reva-coral);
	border-radius: 9px;
	color: var(--reva-coral-dark);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	font-size: 0; /* hide TEC's own text node */
	transition: background-color 0.2s ease, color 0.2s ease;
}

.reva-event-detail__map-link a::before {
	content: 'Get Directions';
	font-size: 13.5px;
}

.reva-event-detail__map-link a:hover {
	background: var(--reva-coral);
	color: #fff;
}

/* TEC's real embedded map (tribe_get_embedded_map()) — either a
   plain iframe or a div TEC's own JS fills in, both sized by TEC
   itself (default 100% width / 350px height, filtered via
   tribe_events_single_map_default_width/height). This wrapper just
   gives it consistent spacing/rounding to match the rest of the
   page; the map's own width/height attributes are left as TEC sets
   them rather than overridden. */
.reva-event-detail__map {
	margin-top: 16px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--reva-line);
}

.reva-event-detail__map iframe {
	display: block;
	width: 100%;
}

/* -----------------------------
   Organizer card
----------------------------- */
.reva-event-detail__organizer-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--reva-line);
	border-radius: 14px;
	background: #F7F9F8;
}

.reva-event-detail__organizer-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	font-size: 20px;
}

.reva-event-detail__organizer-info {
	flex: 1;
	min-width: 0;
}

.reva-event-detail__organizer-info strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--reva-ink);
}

.reva-event-detail__organizer-info span {
	display: block;
	margin-top: 3px;
	font-size: 13.5px;
	color: var(--reva-ink-soft);
}

.reva-event-detail__organizer-follow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border-radius: 9px;
	background: var(--reva-coral);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.reva-event-detail__organizer-follow:hover {
	background: var(--reva-coral-dark);
	color: #fff;
}

/* -----------------------------
   Sticky ticket sidebar
----------------------------- */
.reva-event-detail__sidebar {
	position: sticky;
	top: 24px;
}

/* Un-stuck while the real registration section is in view (toggled
   by IntersectionObserver in event-detail.js) so the sticky sidebar
   doesn't visually sit on top of the real ticket/RSVP form. */
.reva-event-detail__sidebar--unstuck {
	position: static;
}

.reva-event-detail__ticket-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px;
	border: 1px solid var(--reva-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 40px rgba(29, 48, 46, 0.08);
}

.reva-event-detail__ticket-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--reva-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.reva-event-detail__ticket-price {
	font-size: 28px;
	font-weight: 800;
	color: var(--reva-ink);
	letter-spacing: -0.01em;
}

.reva-event-detail__ticket-datetime {
	margin-top: 6px;
	margin-bottom: 18px;
	font-size: 13.5px;
	color: var(--reva-ink-soft);
}

.reva-event-detail__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	border-radius: 10px;
	background: var(--reva-coral);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.reva-event-detail__cta:hover {
	background: var(--reva-coral-dark);
	color: #fff;
}

.reva-event-detail__cta:active {
	transform: scale(0.98);
}

.reva-event-detail__original-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	margin-top: 10px;
	border: 1px solid var(--reva-line);
	border-radius: 10px;
	color: var(--reva-ink-soft);
	font-size: 13.5px;
	font-weight: 600;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.reva-event-detail__original-link:hover {
	border-color: var(--reva-coral);
	color: var(--reva-coral-dark);
}

.reva-event-detail__original-note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--reva-muted);
}

/* Inside the main-column registration section (not the sidebar),
   these shouldn't stretch to the full wide-column width — capped to
   a comfortable button/note width instead. */
.reva-event-detail__main .reva-event-detail__cta,
.reva-event-detail__main .reva-event-detail__original-link {
	display: inline-flex;
	width: auto;
	min-width: 200px;
}

.reva-event-detail__main .reva-event-detail__original-note {
	max-width: 480px;
}

/* -----------------------------
   Registration section summary (price + date), shown at the top of
   the Tickets/RSVP section in the main column, right above the
   real Event Tickets form.
----------------------------- */
.reva-event-detail__registration-summary {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 16px;
}

.reva-event-detail__registration-price {
	font-size: 22px;
	font-weight: 800;
	color: var(--reva-ink);
	letter-spacing: -0.01em;
}

.reva-event-detail__registration-datetime {
	font-size: 13.5px;
	color: var(--reva-ink-soft);
}

/* =============================================================
   Registration form — Event Tickets / RSVP (real plugin markup)
   =============================================================
   Event Tickets ships its own compiled stylesheets
   (build/css/tickets.css, build/css/rsvp.css) built for a narrow
   ~340-580px sidebar card, in Roboto, with the plugin's own accent
   color and spacing tokens (--tec-*). Dropped into this page's wide
   main column unmodified, three things break at once: the card caps
   itself at max-width:580px and sits stranded instead of filling the
   section (.tribe-tickets__rsvp-wrapper), every label/button renders
   in the plugin's default font instead of Poppins, and the notice
   banners (must-login, success) use the plugin's own flat color
   instead of this page's palette.
   This block treats the whole card as one component we own the look
   of — every rule below sets font-family explicitly, the outer card
   is stretched to fill the section, and buttons/inputs/notices are
   restyled to match the rest of the page (same radius, same coral,
   same weight scale) rather than nudging the plugin's own defaults.
   ============================================================= */
.reva-event-detail__registration-form,
.reva-event-detail__registration-form * {
	font-family: 'Poppins', sans-serif !important;
}

.reva-event-detail__registration-form {
	margin-top: 4px;
}

/* Both the Tickets Commerce form and the RSVP wrapper cap themselves
   at a fixed max-width meant for a sidebar card
   (.tribe-tickets__tickets-item has no cap, but
   .tribe-tickets__rsvp-wrapper has max-width:580px in rsvp.css) —
   stretch both to fill this page's full-width main column instead. */
.reva-event-detail__registration-form .tribe-tickets__rsvp-wrapper {
	max-width: none !important;
	width: 100% !important;
	margin-top: 0 !important;
	border: 1px solid var(--reva-line) !important;
	border-radius: 14px !important;
	background: #fff !important;
	overflow: visible !important;
}

/* Generic "Tickets" heading (v2/tickets/title.php) — redundant next
   to this section's own <h2> above. */
.reva-event-detail__registration-form .tribe-tickets__tickets-title {
	display: none !important;
}

/* -----------------------------
   Ticket item card — the row(s) with name / price / quantity / buy.
   Given the same card treatment (border, radius, padding) as every
   other card on this page (.reva-event-detail__gtk-card,
   .reva-event-detail__organizer-card) instead of the plugin's bare
   border-top rule, and laid out as a deliberate row that fills the
   width rather than leaving the right side empty.
----------------------------- */
.reva-event-detail__registration-form .tribe-tickets__tickets-item {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	width: 100% !important;
	padding: 20px !important;
	border: 1px solid var(--reva-line) !important;
	border-radius: 14px !important;
	background: #F7F9F8 !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-item-content-title-container {
	flex: 1 1 220px !important;
	min-width: 0 !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-item-content-title {
	font-family: 'Poppins', sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--reva-ink) !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-item-extra {
	flex: 0 0 auto !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-item-extra-price,
.reva-event-detail__registration-form .tribe-tickets__tickets-sale-price {
	font-family: 'Poppins', sans-serif !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	color: var(--reva-ink) !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-item-extra-available {
	font-family: 'Poppins', sans-serif !important;
	font-size: 12.5px !important;
	color: var(--reva-muted) !important;
	margin-top: 2px !important;
	margin-bottom: 0 !important;
}

/* Quantity stepper. */
.reva-event-detail__registration-form .tribe-tickets__tickets-item-quantity {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex: 0 0 auto !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-item-quantity-number-input {
	width: 52px !important;
	height: 42px !important;
	padding: 0 4px !important;
	border: 1px solid var(--reva-line) !important;
	border-radius: 9px !important;
	background: #fff !important;
	text-align: center !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--reva-ink) !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-item-quantity-remove,
.reva-event-detail__registration-form .tribe-tickets__tickets-item-quantity-add {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border: 1px solid var(--reva-line) !important;
	border-radius: 9px !important;
	background: #fff !important;
	color: var(--reva-ink) !important;
	font-size: 17px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
	margin-bottom: 0;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-item-quantity-remove:hover,
.reva-event-detail__registration-form .tribe-tickets__tickets-item-quantity-add:hover {
	background: var(--reva-coral-soft) !important;
	border-color: var(--reva-coral) !important;
	color: var(--reva-coral-dark) !important;
}

/* Footer: Quantity: / Total: summary + submit button, full-width row
   under the ticket card. */
.reva-event-detail__registration-form .tribe-tickets__tickets-footer {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 16px 24px !important;
	border-top: 1px solid var(--reva-line) !important;
	margin-top: 20px !important;
	padding-top: 20px !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-footer-quantity,
.reva-event-detail__registration-form .tribe-tickets__tickets-footer-total {
	font-family: 'Poppins', sans-serif !important;
	font-size: 14px !important;
	color: var(--reva-ink-soft) !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-footer-quantity-number,
.reva-event-detail__registration-form .tribe-tickets__tickets-footer-total-wrap {
	font-weight: 700 !important;
	color: var(--reva-ink) !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-footer-total {
	margin-left: auto !important;
}

/* Primary submit button — real classes:
   #tribe-tickets__tickets-buy / .tribe-tickets__tickets-buy when
   logged in (submit/button.php, always ships with the disabled
   attribute; the plugin's own JS clears it once quantity > 0 — that
   greyed-out look at qty 0 is correct, not a bug); "Log in to
   purchase" (submit/must-login.php) renders instead as an <a
   class="tribe-common-c-btn tribe-common-c-btn--small"> when
   $must_login is true. Both get the exact same visual weight here so
   neither looks like a downgraded fallback. */
.reva-event-detail__registration-form #tribe-tickets__tickets-buy,
.reva-event-detail__registration-form .tribe-tickets__tickets-buy,
.reva-event-detail__registration-form .tribe-common-c-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 48px !important;
	padding: 0 26px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--reva-coral) !important;
	background-color: var(--reva-coral) !important;
	color: #fff !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
}

.reva-event-detail__registration-form #tribe-tickets__tickets-buy:hover,
.reva-event-detail__registration-form .tribe-tickets__tickets-buy:hover,
.reva-event-detail__registration-form .tribe-common-c-btn:hover {
	background: var(--reva-coral-dark) !important;
	background-color: var(--reva-coral-dark) !important;
	color: #fff !important;
}

.reva-event-detail__registration-form #tribe-tickets__tickets-buy:disabled,
.reva-event-detail__registration-form .tribe-tickets__tickets-buy:disabled {
	background: var(--reva-line) !important;
	background-color: var(--reva-line) !important;
	color: var(--reva-muted) !important;
	cursor: not-allowed !important;
}

/* Logged-out ticket row (item.php: .tribe-tickets__tickets-item--disabled
   when $must_login; quantity number.php adds .tribe-tickets__disabled
   to the wrapper and `disabled` to the input). */
.reva-event-detail__registration-form .tribe-tickets__tickets-item--disabled {
	opacity: 0.6 !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-item-quantity-number.tribe-tickets__disabled,
.reva-event-detail__registration-form .tribe-tickets__tickets-item-quantity-number-input:disabled {
	background: var(--reva-line) !important;
	cursor: not-allowed !important;
}

.reva-event-detail__registration-form .tribe-tickets__tickets-item--disabled .tribe-tickets__tickets-item-quantity-remove,
.reva-event-detail__registration-form .tribe-tickets__tickets-item--disabled .tribe-tickets__tickets-item-quantity-add {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* =============================================================
   RSVP (real classes confirmed from event-tickets/src/views/v2/rsvp/*)
   ============================================================= */

/* The details|actions row (content.php: .tribe-tickets__rsvp,
   a .tribe-common-g-row). Plugin CSS gives it a large fixed
   --tec-spacer-10 padding and sizes both columns as fractions of an
   8-column grid built for the 580px card — at full width that left a
   tall dead gap. Rebuilt as a simple flex row that fills the card and
   sizes to its own content, with a real divider matching this page's
   card style instead of the plugin's dashed dividers. */
.reva-event-detail__registration-form .tribe-tickets__rsvp {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 24px !important;
	width: 100% !important;
	padding: 24px !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-details-wrapper {
	width: auto !important;
	flex: 1 1 auto !important;
	display: block !important;
	text-align: left !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-details {
	text-align: left !important;
	width: auto !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-actions-wrapper {
	width: auto !important;
	flex: 0 0 auto !important;
	border-left: 1px solid var(--reva-line) !important;
	padding-left: 24px !important;
	text-align: left !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-title {
	font-family: 'Poppins', sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--reva-ink) !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-attendance {
	margin-top: 12px !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-attendance-number {
	font-family: 'Poppins', sans-serif !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	color: var(--reva-ink) !important;
	line-height: 1.1 !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-attendance-going {
	font-family: 'Poppins', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--reva-ink-soft) !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-actions-rsvp {
	text-align: left !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-actions-rsvp > .tribe-common-h2 {
	display: block !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var(--reva-muted) !important;
	margin-bottom: 10px !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-actions-button-going {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 48px !important;
	padding: 0 26px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--reva-coral) !important;
	color: #fff !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-actions-button-going:hover {
	background: var(--reva-coral-dark) !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-actions-button-going:disabled {
	background: var(--reva-line) !important;
	color: var(--reva-muted) !important;
	cursor: not-allowed !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-actions-button-not-going {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 40px !important;
	padding: 0 18px !important;
	margin-top: 10px !important;
	border: 1px solid var(--reva-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--reva-ink-soft) !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

/* -----------------------------
   RSVP: guest-info form step (appears after clicking "Going" — Name /
   Email / Number of Guests / Cancel+Finish). Real wrapper classes:
   .tribe-tickets__rsvp-form-wrapper (outer),
   .tribe-tickets__rsvp-form-content (inner).
----------------------------- */
.reva-event-detail__registration-form .tribe-tickets__rsvp-form-wrapper {
	max-width: 100% !important;
	padding: 24px !important;
}
.event-tickets .tribe-tickets__tickets-form{
    max-width: 100% !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-form-title h3 {
	font-family: 'Poppins', sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--reva-ink) !important;
	line-height: 1.4 !important;
	margin: 0 0 16px !important;
}

.reva-event-detail__registration-form .tribe-tickets__form-field {
	margin: 0 0 16px !important;
}

.reva-event-detail__registration-form .tribe-tickets__form-field-label {
	display: block !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--reva-ink) !important;
	margin: 0 0 6px !important;
}

.reva-event-detail__registration-form .tribe-tickets__form-field-input {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 46px !important;
	padding: 0 14px !important;
	border: 1px solid var(--reva-line) !important;
	border-radius: 9px !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 14px !important;
	background: #fff !important;
	color: var(--reva-ink) !important;
}

.reva-event-detail__registration-form .tribe-tickets__form-field-input:focus {
	outline: none !important;
	border-color: var(--reva-coral) !important;
	box-shadow: 0 0 0 3px rgba(57, 183, 206, 0.15) !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-form-buttons {
	display: flex !important;
	gap: 12px !important;
	padding-top: 0px !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-form-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 48px !important;
	padding: 0 26px !important;
	border-radius: 10px !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	border: 0 !important;
	background: var(--reva-coral) !important;
	color: #fff !important;
	flex: 1;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-form-button:hover {
	background: var(--reva-coral-dark) !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-form-button--cancel {
	background: #fff !important;
	color: var(--reva-ink-soft) !important;
	border: 1px solid var(--reva-line) !important;
	margin-left: 0 !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-form-button--cancel:hover {
	border-color: var(--reva-ink-soft) !important;
	background: #fff !important;
}
/* -----------------------------
   "You have N RSVPs/Tickets for this Event — View RSVPs/Tickets" —
   TEC's own real link to the /tickets/ orders page (Tickets_View::
   inject_link_template(), markup: view-link.php's
   .tribe-link-view-attendee), captured for free since it fires on
   the same tribe_events_single_event_after_the_meta action our
   ticket/RSVP form capture already runs (see
   render_ticket_form_action() in class-reva-event-detail-query.php).
   Given a real, visible treatment here so a logged-in attendee always
   has a working way back to their existing RSVP/order list from the
   event page itself — previously present in the markup but
   completely unstyled.
----------------------------- */
.reva-event-detail__registration-form .tribe-link-view-attendee {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	width: 100% !important;
	margin: 0 0 20px !important;
	padding: 14px 18px !important;
	border: 1px solid var(--reva-coral) !important;
	border-radius: 12px !important;
	background: var(--reva-coral-soft) !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 13.5px !important;
	color: var(--reva-ink) !important;
}

.reva-event-detail__registration-form .tribe-link-view-attendee a {
	color: var(--reva-coral-dark) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}

/* -----------------------------


/* -----------------------------
   Notice banners — must-login (both RSVP and Tickets Commerce use
   this exact pattern) and RSVP success. Given real card treatment
   (rounded, bordered, brand-tinted background) that fills the card
   width, instead of the plugin's flat inline background with no
   border sitting slightly narrower than the card around it.
----------------------------- */
.reva-event-detail__registration-form .tribe-tickets__rsvp-message {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 20px !important;
	padding: 16px 20px !important;
	border-radius: 12px !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-message--success {
	background: var(--reva-coral-soft) !important;
	border: 1px solid var(--reva-coral) !important;
	color: var(--reva-ink) !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-message--must-login {
	background: #FFF4E5 !important;
	border: 1px solid #F0C878 !important;
	color: var(--reva-ink) !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-message-text strong {
	font-weight: 600 !important;
}

.reva-event-detail__registration-form .tribe-tickets__rsvp-message-link {
	color: var(--reva-coral-dark) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}

.reva-event-detail__registration-form :is(.tribe-tickets__rsvp-message--success-icon, .tribe-tickets__rsvp-message--must-login-icon) {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}

/* Must-login banner sits outside the card in the DOM (content.php
   prints it before the .tribe-common-g-row), so it needs its own
   top/side spacing to read as part of this section rather than a
   stray strip above it. */
.reva-event-detail__registration-form > .tribe-tickets__rsvp-message {
	margin-bottom: 20px !important;
}

/* -----------------------------
   Responsive: stack the RSVP details|actions row and drop the
   divider on narrow screens.
----------------------------- */
@media (max-width: 480px) {
	.reva-event-detail__registration-form .tribe-tickets__rsvp {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.reva-event-detail__registration-form .tribe-tickets__rsvp-actions-wrapper {
		border-left: 0 !important;
		border-top: 1px solid var(--reva-line) !important;
		padding-left: 0 !important;
		padding-top: 20px !important;
		width: 100% !important;
	}

	.reva-event-detail__registration-form .tribe-tickets__tickets-footer-total {
		margin-left: 0 !important;
	}
}

/* -----------------------------
   Related events
----------------------------- */
.reva-event-detail__related {
	max-width: 1272px;
	margin: 56px auto 0;
	padding: 40px 24px 64px;
	border-top: 1px solid var(--reva-line);
}

.reva-event-detail__related-title {
	margin: 0 0 24px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--reva-ink);
}

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

/* -----------------------------
   Share popup (reused pattern from events-browse.js)
----------------------------- */
.reva-share-popup {
	position: absolute;
	z-index: 40;
	min-width: 170px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--reva-line);
	border-radius: 12px;
	box-shadow: 0 16px 32px rgba(29, 48, 46, 0.16);
}

.reva-share-popup__option {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	background: none;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--reva-ink);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.reva-share-popup__option:hover {
	background: var(--reva-coral-soft);
	color: var(--reva-coral-dark);
}

/* -----------------------------
   Responsive
----------------------------- */
@media (max-width: 1024px) {
	.reva-event-detail__layout {
		grid-template-columns: 1fr;
	}

	.reva-event-detail__sidebar {
		position: static;
		order: -1;
	}

	.reva-event-detail__related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.reva-event-detail__hero {
		margin-top: 16px;
		padding: 0 16px;
	}

	.reva-event-detail__hero-inner {
		border-radius: 12px;
	}

	.reva-event-detail__layout {
		padding: 28px 16px 0;
		gap: 28px;
	}

	.reva-event-detail__title {
		font-size: 25px;
	}

	.reva-event-detail__meta-row {
		gap: 18px;
	}

	.reva-event-detail__lineup-grid,
	.reva-event-detail__good-to-know {
		grid-template-columns: 1fr;
	}

	.reva-event-detail__organizer-card {
		flex-wrap: wrap;
	}

	.reva-event-detail__organizer-follow {
		width: 100%;
		justify-content: center;
	}

	.reva-event-detail__related {
		padding: 32px 16px 48px;
	}

	.reva-event-detail__related-grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.reva-event-detail__related-grid {
		grid-template-columns: 1fr;
	}
}