/* Lozee Events — front-end styles.
   New UI inherits font/colors from the surrounding theme via `inherit`/`currentColor`;
   only structural/spacing rules are defined here so pages blend into the active theme. */

/* The theme's customizer typography (uploads/phlox-pro/custom.css) sets a
   font-family for h1/h3/h4/h5 but never for h2, so h2 elements site-wide fall
   back to Elementor's default Latin font instead of the theme's Persian font.
   Pin our own h2 headings explicitly to the theme's actual body font so they
   render correctly regardless of that gap. */
.lozee-event-registration h2,
.lozee-event-card-title {
	font-family: 'IRANYekan', Tahoma, sans-serif;
}

/* No-sidebar full-width override for the event single template (defensive —
   the theme's base .aux-primary is already width:100% without a sidebar, but
   this guards against any customizer-generated layout CSS that assumes one). */
.lozee-no-sidebar {
	width: 100% !important;
	float: none !important;
}

/* Fixed 50/50 split: info column (title/meta/content/form) stays sticky in
   the viewport while the taller gallery column scrolls past it, using the
   flexbox `align-items: flex-start` + `position: sticky` technique — no JS
   needed, the sticky column releases naturally once the gallery column ends. */
.lozee-event-split {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.lozee-event-info-col {
	flex: 0 0 50%;
	max-width: 50%;
	position: sticky;
	top: var( --lozee-sticky-offset, 24px );
}

.lozee-event-gallery-col {
	flex: 0 0 50%;
	max-width: 50%;
}

.lozee-event-gallery-col .lozee-gallery-grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 782px) {
	.lozee-event-split {
		display: block;
	}

	.lozee-event-info-col,
	.lozee-event-gallery-col {
		max-width: 100%;
		position: static;
	}

	.lozee-event-gallery-col {
		margin-top: 2em;
	}

	.lozee-event-gallery-col .lozee-gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}

.lozee-event-title {
	margin-bottom: 0.5em;
	font-family: 'YekanBakh', 'IRANYekan', Tahoma, sans-serif;
	font-weight: 600;
	color: var( --e-global-color-primary, #1323E5 );
}

/* Same coral-stripe-behind-text signature used by aux_modern_heading widgets
   and the event archive title, so the single event page reads as part of the
   same design system instead of a plain default heading. */
.lozee-event-title span {
	background-image: linear-gradient(
		0deg,
		transparent 25%,
		var( --e-global-color-secondary, #FF6F61 ) 26%,
		var( --e-global-color-secondary, #FF6F61 ) 38%,
		transparent 38%
	);
}

/* Featured image sits directly under the title, glued to the meta box right
   below it (no gap): the image gets rounded top corners, the meta list gets
   rounded bottom corners only, so the two read as one attached unit. */
.lozee-event-hero {
	margin-bottom: 1.5em;
}

.lozee-event-hero-image {
	overflow: hidden;
	border-radius: 6px 6px 0 0;
	line-height: 0;
}

.lozee-event-hero-image img {
	width: 100%;
	height: auto;
	display: block;
}

.lozee-event-hero .lozee-event-meta {
	margin: 0;
	border-radius: 0 0 6px 6px;
}

.lozee-event-hero.lozee-no-image .lozee-event-meta {
	border-radius: 6px;
}

.lozee-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em 2em;
	list-style: none;
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	background: rgba(127, 127, 127, 0.06);
	border-radius: 6px;
	font-size: 0.95em;
}

.lozee-event-meta li {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.lozee-event-meta strong {
	margin-inline-end: 0.35em;
	font-weight: 600;
}

.lozee-meta-icon {
	display: inline-flex;
	color: var( --e-global-color-primary, #1323E5 );
}

.lozee-meta-icon svg {
	width: 18px;
	height: 18px;
}

.lozee-status-pill {
	display: inline-block;
	padding: 0.15em 0.9em;
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 600;
}

.lozee-status-pill.is-open {
	background: rgba(16, 163, 74, 0.12);
	color: #0f9d4c;
}

.lozee-status-pill.is-closed {
	background: rgba(224, 49, 49, 0.12);
	color: #c0392b;
}

/* Social share row, sits right under the meta box. */
.lozee-event-share {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1.5em;
}

.lozee-share-label {
	font-weight: 600;
	font-size: 0.9em;
}

.lozee-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.lozee-share-btn:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}

.lozee-share-btn svg {
	width: 18px;
	height: 18px;
}

.lozee-share-whatsapp {
	background: #25d366;
}

.lozee-share-twitter {
	background: #000;
}

.lozee-share-facebook {
	background: #1877f2;
}

/* Registration-closed banner (lock icon + reason), replaces the plain red
   notice line so a closed event reads clearly at a glance. */
.lozee-registration-closed-banner {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.9em 1.1em;
	background: rgba(224, 49, 49, 0.08);
	color: #c0392b;
	border-radius: 6px;
	font-weight: 600;
}

.lozee-lock-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.lozee-lock-icon svg {
	width: 18px;
	height: 18px;
}

.lozee-event-content {
	margin-bottom: 2em;
	line-height: 1.9;
}

/* Gallery grid (single event) */
.lozee-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
	margin-bottom: 2em;
}

.lozee-gallery-grid .lozee-gallery-item {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 1 / 1;
}

.lozee-gallery-grid .lozee-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.lozee-gallery-grid .lozee-gallery-item:hover img {
	transform: scale(1.05);
}

/* Self-contained lightbox */
.lozee-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
}

.lozee-lightbox-overlay img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 4px;
}

.lozee-lightbox-close,
.lozee-lightbox-prev,
.lozee-lightbox-next {
	position: absolute;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	padding: 10px 14px;
	border-radius: 50%;
}

.lozee-lightbox-close {
	top: 20px;
	inset-inline-end: 20px;
}

.lozee-lightbox-prev {
	inset-inline-start: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.lozee-lightbox-next {
	inset-inline-end: 20px;
	top: 50%;
	transform: translateY(-50%);
}

/* Registration form */
.lozee-event-registration {
	margin-top: 2em;
	padding: 1.5em;
	background: rgba(127, 127, 127, 0.06);
	border-radius: 8px;
}

.lozee-registration-notice {
	color: #a00;
	font-weight: 600;
}

.lozee-form-row {
	margin-bottom: 1em;
}

.lozee-form-row label {
	display: block;
	margin-bottom: 0.4em;
	font-weight: 600;
}

.lozee-form-row input[type="text"],
.lozee-form-row input[type="tel"],
.lozee-form-row input[type="email"],
.lozee-form-row input[type="number"],
.lozee-form-row textarea {
	width: 100%;
	max-width: 420px;
	padding: 12px 15px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	font-size: 1em;
	background: #fff;
	color: inherit;
	text-align: right;
	direction: rtl;
	outline: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus: primary-color border with a soft ring — mirrors the theme's CF7 fields. */
.lozee-form-row input[type="text"]:focus,
.lozee-form-row input[type="tel"]:focus,
.lozee-form-row input[type="email"]:focus,
.lozee-form-row input[type="number"]:focus,
.lozee-form-row textarea:focus {
	border-color: var( --e-global-color-primary, #1323E5 );
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.lozee-form-row .lozee-required {
	color: #c0392b;
}

.lozee-form-row input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.lozee-honeypot-wrap {
	display: none !important;
}

.lozee-registration-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.lozee-form-response {
	font-weight: 600;
}

.lozee-form-response.is-success {
	color: #0a0;
}

.lozee-form-response.is-error {
	color: #a00;
}

/* Section heading "ثبت‌نام در رویداد": primary-blue text with the coral
   highlight stripe drawn behind its lower third — the same signature used by
   the event title and archive header (aux_modern_heading widgets). */
.lozee-event-registration h2 {
	color: var( --e-global-color-primary, #1323E5 );
}

.lozee-event-registration h2 span {
	display: inline;
	background-image: linear-gradient(
		0deg,
		transparent 25%,
		var( --e-global-color-secondary, #FF6F61 ) 26%,
		var( --e-global-color-secondary, #FF6F61 ) 38%,
		transparent 38%
	);
	padding-left: 10px;
	margin-left: -10px;
}

/* Submit button: outline "modern button" look — a primary-color border and
   text, with a short accent line to the side that shrinks and shifts to the
   coral color on hover (mirrors the theme's aux-modern-button interaction). */
.lozee-event-registration .lozee-registration-submit {
	position: relative;
	display: inline-block;
	border: 1px solid var( --e-global-color-primary, #1323E5 );
	background: transparent;
	color: var( --e-global-color-primary, #1323E5 );
	padding: 0.7em 2.5em;
	border-radius: 6px;
	cursor: pointer;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.lozee-event-registration .lozee-registration-submit .lozee-btn-text {
	position: relative;
	display: inline-block;
}

.lozee-event-registration .lozee-registration-submit .lozee-btn-text::before {
	content: "";
	position: absolute;
	width: 45px;
	height: 1px;
	left: -50px;
	top: 50%;
	background-color: var( --e-global-color-primary, #1323E5 );
	transition: all 300ms ease-out;
}

.lozee-event-registration .lozee-registration-submit:hover {
	color: var( --e-global-color-secondary, #FF6F61 );
	border-color: var( --e-global-color-secondary, #FF6F61 );
}

.lozee-event-registration .lozee-registration-submit:hover .lozee-btn-text::before {
	width: 25px;
	background-color: var( --e-global-color-secondary, #FF6F61 );
}

/* Event archive header — matches the site's "مجله لوزی" blog header signature:
   bold primary-blue heading with a coral highlight stripe drawn behind the
   lower third of the text via a background-image gradient (the same trick
   used by the theme's own aux_modern_heading widget elsewhere on the site). */
.lozee-archive-title {
	margin-bottom: 1.25em;
	font-family: 'YekanBakh', 'IRANYekan', Tahoma, sans-serif;
	font-size: 2.75em;
	font-weight: 600;
	color: var( --e-global-color-primary, #1323E5 );
}

.lozee-archive-title span {
	background-image: linear-gradient(
		0deg,
		transparent 25%,
		var( --e-global-color-secondary, #FF6F61 ) 26%,
		var( --e-global-color-secondary, #FF6F61 ) 38%,
		transparent 38%
	);
}

/* Event archive grid — matches the site's blog card design: a desaturated
   photo with a solid-color info box overlapping its bottom edge, which swaps
   from primary blue to secondary coral (and the title inverts to blue +
   underline) on hover — the same interaction as the "مجله لوزی" post cards. */
.lozee-event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin-bottom: 2em;
}

/* Fixed column count for the [lozee_events] shortcode, with a responsive
   fallback. (The Elementor widget sets its own responsive columns instead.) */
.lozee-event-grid.lozee-event-grid--cols {
	grid-template-columns: repeat(var(--lozee-events-columns, 3), 1fr);
}

@media (max-width: 782px) {
	.lozee-event-grid.lozee-event-grid--cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

.lozee-events-empty {
	opacity: 0.8;
}

.lozee-event-card {
	display: block;
	color: inherit;
	text-decoration: none;
	border-radius: 8px;
	overflow: hidden;
	background: var( --e-global-color-primary, #1323E5 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lozee-event-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.lozee-event-card-image {
	position: relative;
	aspect-ratio: 4 / 3;
	background: rgba(127, 127, 127, 0.15);
	overflow: hidden;
}

.lozee-event-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(100%);
}

.lozee-event-badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 0.75em;
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 2;
}

.lozee-event-card-body {
	position: relative;
	margin: -28px 14px 0;
	padding: 1.1em 1.2em;
	border-radius: 6px;
	background: var( --e-global-color-primary, #1323E5 );
	transition: background-color 0.3s ease;
}

.lozee-event-card:hover .lozee-event-card-body {
	background: var( --e-global-color-secondary, #FF6F61 );
}

.lozee-event-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1em;
	margin-bottom: 0.5em;
	font-size: 0.8em;
	color: var( --e-global-color-accent, #fff );
	opacity: 0.9;
}

.lozee-event-card-title {
	margin: 0 0 0.25em;
	font-size: 1.1em;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	transition: color 0.3s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lozee-event-card:hover .lozee-event-card-title {
	color: var( --e-global-color-primary, #1323E5 );
	text-decoration: underline;
}

/* "Magazine" display style (widget/shortcode option): alternating primary/
   secondary info boxes that swap colour on hover — echoes the theme's post
   grid. Odd cards keep the default blue→coral behaviour; even cards start coral
   and go blue on hover. Titles stay white so they read on either colour. */
.lozee-event-grid--magazine .lozee-event-card:nth-child(2n),
.lozee-event-grid--magazine .lozee-event-card:nth-child(2n) .lozee-event-card-body {
	background: var( --e-global-color-secondary, #FF6F61 );
}

.lozee-event-grid--magazine .lozee-event-card:nth-child(2n):hover .lozee-event-card-body {
	background: var( --e-global-color-primary, #1323E5 );
}

.lozee-event-grid--magazine .lozee-event-card-title,
.lozee-event-grid--magazine .lozee-event-card:hover .lozee-event-card-title {
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   Elementor widget: Instagram-style top posts grid
   ========================================================================== */
.lozee-top-posts-grid {
	display: grid;
	grid-template-columns: repeat(var(--lozee-tp-columns, 4), 1fr);
	gap: var(--lozee-tp-gap, 4px);
}

.lozee-top-posts-item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--lozee-tp-radius, 0px);
	color: inherit;
	text-decoration: none;
}

.lozee-top-posts-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.lozee-top-posts-item.lozee-top-posts-noimage {
	background: linear-gradient(135deg, rgba(127, 127, 127, 0.25), rgba(127, 127, 127, 0.1));
}

.lozee-top-posts-item:hover img {
	transform: scale(1.08);
}

.lozee-top-posts-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5em;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.lozee-top-posts-item:hover .lozee-top-posts-overlay {
	opacity: 1;
}

.lozee-top-posts-stat {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: #fff;
	font-weight: 700;
	font-size: 0.95em;
}

.lozee-top-posts-stat svg {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
}

.lozee-top-posts-title {
	margin-top: 0.5em;
	font-size: 0.95em;
	line-height: 1.4;
}

/* Column count per breakpoint is controlled by the widget's own responsive
   "columns" control (Elementor-generated CSS overrides --lozee-tp-columns);
   the value here is just the base/desktop fallback. */