/* ========================================================================== 
   Open Circle Frontend Styles
   ========================================================================== */


/* ========================================================================== 
   1. Shared Buttons
   ========================================================================== */

.oc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 1rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, #ffb07a 0%, #d95a2f 100%);
	color: #fff !important;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.oc-button:hover,
.oc-button:focus {
	color: #fff !important;
	opacity: 0.9;
}

.oc-button--compact {
	padding: 0.45rem 0.9rem;
	font-size: 0.875rem;
	line-height: 1.2;
}

.oc-button--secondary {
	border: 1px solid currentColor;
	background: transparent;
	color: inherit !important;
}

.oc-button--secondary:hover,
.oc-button--secondary:focus {
	color: inherit !important;
}


/* ========================================================================== 
   2. View Orders — Order Cards
   ========================================================================== */

/* --------------------------------------------------------------------------
   Order card container
   -------------------------------------------------------------------------- */

.oc-order-card {
	padding: 1.75rem 0;
	border-bottom: 1px solid #d8d8d8;
}

/* --------------------------------------------------------------------------
   Order header and footer rows
   -------------------------------------------------------------------------- */

.oc-order-row-1,
.oc-order-row-3 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.oc-order-row-2 {
	margin: 0.85rem 0;
}

.oc-order-row-3 {
	margin-top: 1rem;
}

.oc-order-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
}

.oc-order-date,
.oc-order-status {
	opacity: 0.7;
}

.oc-order-total {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   View Order Details link
   -------------------------------------------------------------------------- */

.oc-order-view-link {
	white-space: nowrap;
	background: linear-gradient(
		90deg,
		rgba(39, 46, 117, 1) 0%,
		rgba(39, 46, 117, 1) 24%,
		rgba(51, 154, 222, 1) 100%
	);
}

.oc-order-view-link:hover,
.oc-order-view-link:focus {
	background: linear-gradient(
		90deg,
		rgba(128, 110, 92, 1) 0%,
		rgba(128, 110, 92, 1) 56%,
		rgba(159, 155, 127, 1) 100%
	);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Order-level actions
   -------------------------------------------------------------------------- */

.oc-order-actions {
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Orders pagination
   -------------------------------------------------------------------------- */

.oc-orders-pagination {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
}


/* ========================================================================== 
   3. View Orders — Purchased Item Cards
   ========================================================================== */

/* --------------------------------------------------------------------------
   Purchased item container
   -------------------------------------------------------------------------- */

.oc-order-item + .oc-order-item {
	margin-top: 1rem;
}

.oc-order-item-card {
	margin-bottom: 1.75rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid #e6e6e6;
}

.oc-order-item-card:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Purchased item title and summary
   -------------------------------------------------------------------------- */

.oc-order-item-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.oc-order-item-title + .oc-order-item-title {
	margin-top: 0.35rem;
}

.oc-order-summary {
	margin-top: 0.35rem;
	color: #666;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.5;
	opacity: 0.85;
}

.oc-order-summary > :first-child {
	margin-top: 0;
}

.oc-order-summary > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Purchased item action row
   -------------------------------------------------------------------------- */

.oc-action-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.85rem;
}

.oc-copy-zoom-action {
	cursor: pointer;
}


/* ========================================================================== 
   4. View Orders — Responsive Layout
   ========================================================================== */

@media (max-width: 600px) {
	.oc-order-row-1,
	.oc-order-row-3 {
		align-items: flex-start;
	}

	.oc-order-heading {
		display: block;
	}

	.oc-order-date {
		display: block;
		margin-top: 0.25rem;
	}
}


/* ========================================================================== 
   5. Participant Resources — Panel Header and Toggle
   ========================================================================== */

/* --------------------------------------------------------------------------
   Toggle button
   -------------------------------------------------------------------------- */

.oc-participant-resource-toggle {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.25rem 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.oc-participant-resource-toggle:focus,
.oc-participant-resource-toggle:focus-visible {
	outline: none;
}

.oc-participant-resource-toggle:hover .oc-participant-resource-title,
.oc-participant-resource-toggle:focus .oc-participant-resource-title {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Toggle heading
   -------------------------------------------------------------------------- */

.oc-participant-resource-heading {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.oc-participant-resource-header {
	margin: 0;
}

.oc-participant-resource-title,
.oc-participant-resource-header .oc-participant-resource-title {
	display: block;
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.35;
}

.oc-participant-resource-schedule {
	margin: 0.3rem 0 0;
}

.oc-participant-resource-header .oc-participant-resource-schedule {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	margin: 0.35rem 0 0;
	font-size: 0.95rem;
	line-height: 1.4;
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Toggle label
   -------------------------------------------------------------------------- */

.oc-participant-resource-toggle-label {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	padding: 0.45rem 0.85rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: linear-gradient(90deg, #ffb07a 0%, #d95a2f 100%);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.oc-participant-resource-toggle:hover .oc-participant-resource-toggle-label,
.oc-participant-resource-toggle:focus-visible .oc-participant-resource-toggle-label {
	color: #fff;
	opacity: 0.9;
}

.oc-participant-resource-toggle:active .oc-participant-resource-toggle-label {
	transform: translateY(1px);
}

@media (max-width: 600px) {
	.oc-participant-resource-toggle {
		gap: 0.75rem;
	}
}


/* ========================================================================== 
   6. Participant Resources — Accordion Behaviour
   ========================================================================== */

/* A single event is always fully visible. */
.oc-participant-resource-content {
	max-height: none;
	overflow: visible;
	opacity: 1;
}

/* Animation applies only when there are multiple resource panels. */
.oc-participant-resources-accordion .oc-participant-resource-content {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.45s ease, opacity 0.3s ease;
}

.oc-participant-resources-accordion .oc-participant-resource-content.is-open {
	opacity: 1;
}


/* ========================================================================== 
   7. Participant Resources — Ticket Information
   ========================================================================== */

.oc-event-ticket-security-code-label,
.oc-event-ticket-security-code {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.35;
}

.oc-event-ticket-security-code {
	font-family: inherit;
	letter-spacing: 0.03em;
}


/* ========================================================================== 
   8. Participant Resources — Information Content
   ========================================================================== */

.oc-resource-information > :first-child,
.oc-resource-video-description > :first-child {
	margin-top: 0;
}

.oc-resource-information > :last-child,
.oc-resource-video-description > :last-child {
	margin-bottom: 0;
}

.oc-resource-information p {
	line-height: 1.7;
}


/* ========================================================================== 
   9. Participant Resources — Further Resource Downloads
   ========================================================================== */

/* --------------------------------------------------------------------------
   Downloads section
   -------------------------------------------------------------------------- */

.oc-resource-downloads {
	margin-top: 2rem;
}

.oc-resource-downloads h4 {
	margin: 0 0 1.25rem;
}

/* --------------------------------------------------------------------------
   Downloads grid
   -------------------------------------------------------------------------- */

.oc-resource-download-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem 2rem;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.oc-resource-download-list .oc-resource-download-item {
	display: block;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Resource links
   -------------------------------------------------------------------------- */

.oc-resource-download-list .oc-resource-file {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	transition: color 0.2s ease;
}

.oc-resource-download-list .oc-resource-file:hover,
.oc-resource-download-list .oc-resource-file:focus {
	color: var(--wp--preset--color--accent, #e46f25);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Resource file icons
   -------------------------------------------------------------------------- */

.oc-resource-download-list .oc-resource-file::before {
	content: "📄";
	display: inline-block;
	flex: 0 0 auto;
	margin-top: 0.1em;
	font-size: 1rem;
	line-height: 1;
}

.oc-resource-download-list .oc-resource-pdf::before {
	content: "📕";
}

.oc-resource-download-list .oc-resource-doc::before,
.oc-resource-download-list .oc-resource-docx::before,
.oc-resource-download-list .oc-resource-odt::before,
.oc-resource-download-list .oc-resource-rtf::before,
.oc-resource-download-list .oc-resource-txt::before {
	content: "📝";
}

.oc-resource-download-list .oc-resource-xls::before,
.oc-resource-download-list .oc-resource-xlsx::before,
.oc-resource-download-list .oc-resource-ods::before,
.oc-resource-download-list .oc-resource-csv::before {
	content: "📊";
}

.oc-resource-download-list .oc-resource-ppt::before,
.oc-resource-download-list .oc-resource-pptx::before,
.oc-resource-download-list .oc-resource-odp::before {
	content: "📈";
}

.oc-resource-download-list .oc-resource-mp3::before,
.oc-resource-download-list .oc-resource-wav::before,
.oc-resource-download-list .oc-resource-m4a::before,
.oc-resource-download-list .oc-resource-aac::before,
.oc-resource-download-list .oc-resource-ogg::before,
.oc-resource-download-list .oc-resource-flac::before {
	content: "🎵";
}

.oc-resource-download-list .oc-resource-mp4::before,
.oc-resource-download-list .oc-resource-mov::before,
.oc-resource-download-list .oc-resource-webm::before,
.oc-resource-download-list .oc-resource-m4v::before,
.oc-resource-download-list .oc-resource-avi::before {
	content: "🎥";
}

.oc-resource-download-list .oc-resource-jpg::before,
.oc-resource-download-list .oc-resource-jpeg::before,
.oc-resource-download-list .oc-resource-png::before,
.oc-resource-download-list .oc-resource-gif::before,
.oc-resource-download-list .oc-resource-webp::before,
.oc-resource-download-list .oc-resource-svg::before {
	content: "🖼️";
}

.oc-resource-download-list .oc-resource-zip::before,
.oc-resource-download-list .oc-resource-rar::before,
.oc-resource-download-list .oc-resource-7z::before,
.oc-resource-download-list .oc-resource-tar::before,
.oc-resource-download-list .oc-resource-gz::before {
	content: "📦";
}

/* --------------------------------------------------------------------------
   Resource file size
   -------------------------------------------------------------------------- */

.oc-resource-download-list .oc-resource-file-size {
	display: block;
	margin: 0.3rem 0 0 1.5rem;
	padding: 0;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.3;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Downloads responsive layout
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.oc-resource-download-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.oc-resource-download-list {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.oc-resource-download-list .oc-resource-file::before {
		display: none;
		content: none;
	}

	.oc-resource-download-list .oc-resource-file {
		display: inline;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.oc-resource-download-list .oc-resource-file-size {
		display: inline;
		margin: 0 0 0 0.35rem;
	}

	.oc-resource-download-list .oc-resource-file-size::before {
		content: "(";
	}

	.oc-resource-download-list .oc-resource-file-size::after {
		content: ")";
	}
}


/* ========================================================================== 
   10. Participant Resources — Zoom Section
   ========================================================================== */

.oc-resource-zoom h4 {
	margin-bottom: 0.75rem;
}

.oc-resource-zoom-actions {
	margin: 1rem 0;
}

.oc-zoom-information-link {
	margin: 1rem 0 0.5rem;
	font-size: 0.95rem;
}

.oc-zoom-information-link a {
	margin-left: 0.35rem;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.oc-zoom-direct-link {
	margin: 0;
}

.oc-zoom-direct-link small {
	font-size: 0.85rem;
	line-height: 1.4;
}

.oc-zoom-direct-link code {
	padding: 0;
	background: none;
	font-size: inherit;
	word-break: break-all;
}


/* ========================================================================== 
   11. Participant Resources — Welcome / Replay Video
   ========================================================================== */

.oc-resource-video h4 {
	margin: 0 0 1rem;
}

.oc-resource-video iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	border: 0;
	border-radius: 0.5rem;
}

.oc-resource-video-description {
	max-width: 70ch;
	margin-top: 1rem;
	font-size: 0.95rem;
	line-height: 1.7;
}

.oc-resource-video-description p:last-child {
	margin-bottom: 0;
}


/* ========================================================================== 
   12. Participant Resources — General Section Spacing
   ========================================================================== */

.oc-resource-section h4 {
	margin: 0 0 0.75rem;
}

.oc-resource-section p:first-of-type {
	margin-top: 0;
}

.oc-resource-section p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Event Portal — Layout Foundation
   ========================================================================== */

.oc-event-portal-main {
	width: 100%;
	max-width: none;
}

.oc-event-portal-outer {
	width: 100%;
	max-width: none;
}

/*.oc-event-portal-content {
	width: min(100%, 1440px);
	max-width: 1440px;
	margin-right: auto;
	margin-left: auto;
}

@media (max-width: 1480px) {
	.oc-event-portal-content {
		width: 100%;
		padding-right: var(--wp--style--root--padding-right);
		padding-left: var(--wp--style--root--padding-left);
	}
}*/

/* ==========================================================================
   Event Portal — Widths
   ========================================================================== */

/* Main portal content follows the site's standard block width. */
.oc-event-portal-content {
	width: 100%;
	max-width: 70% !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

@media only screen and (max-width: 1240px) {

	.oc-event-portal-content {
		max-width: 95% !important;
	}
}

@media only screen and (max-width: 767px) {

	.oc-event-portal-content {
		max-width: 100% !important;
		padding-right: 20px !important;
		padding-left: 20px !important;
	}
}

/* ==========================================================================
   Event Portal — Restore Full-width Site Header
   ========================================================================== */

body.oc-event-portal-page
.wp-site-blocks > header.wp-block-template-part {
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

body.oc-event-portal-page
.wp-site-blocks > header.wp-block-template-part > * {
	width: 100% !important;
	max-width: none !important;
}

body.oc-event-portal-page
header.wp-block-template-part
.wp-block-uagb-container.uagb-is-root-container,
body.oc-event-portal-page
header.wp-block-template-part
.header-mobile,
body.oc-event-portal-page
header.wp-block-template-part
.header-tablet,
body.oc-event-portal-page
header.wp-block-template-part
.header-desktop {
	width: 100% !important;
	max-width: 100% !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

/* ==========================================================================
   Event Portal — Newsletter
   ========================================================================== */

/*
 * Allow the newsletter's outer UAGB block to retain its original
 * full-width structure.
 */
.oc-event-portal-newsletter {
	width: 100%;
	max-width: none;
	margin: 0;
}

/*
 * Constrain the content inside the newsletter rather than constraining
 * the complete block structure.
 */
.oc-event-portal-newsletter
#newsletter > .uagb-container-inner-blocks-wrap {
	width: 100% !important;
	max-width: 70% !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

@media only screen and (max-width: 1240px) {

	.oc-event-portal-newsletter
	#newsletter > .uagb-container-inner-blocks-wrap {
		max-width: 95% !important;
	}
}

@media only screen and (max-width: 767px) {

	.oc-event-portal-newsletter
	#newsletter > .uagb-container-inner-blocks-wrap {
		max-width: 100% !important;
	}
}