/**
 * Webinar filter — modal-only styles. Main search bar uses EM default layout.
 */

/* Main bar: light Trikona touches only */
.em.em-search .em-search-main.em-search-main-bar {
	border-radius: 16px;
	border-color: #e5e7eb !important;
	box-shadow: 0 4px 24px rgba(27, 59, 76, 0.06);
}

.em.em-search .em-search-main.em-search-main-bar > .em-search-submit button {
	border-radius: 12px !important;
	background: #ffc000 !important;
	color: #000 !important;
	font-weight: 700;
	height: auto !important;
	min-height: 34px;
	line-height: 1.2 !important;
	padding: 8px 20px !important;
}

.em.em-search .em-search-main.em-search-main-bar > .em-search-submit button:hover,
.em.em-search .em-search-main.em-search-main-bar > .em-search-submit button:focus {
	background: #000 !important;
	color: #ffc000 !important;
}

/* Modal fields */
.trikona-webinar-filter .em-search-field {
	margin: 0;
	width: 100%;
}

.trikona-webinar-filter .em-search-text input,
.trikona-webinar-filter__select,
.trikona-webinar-filter .em-search-field select,
.trikona-webinar-filter .em-datepicker-data input[type="date"] {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid #dbe4ee;
	border-radius: 12px;
	background: #fff;
	color: #1b3b4c;
	font-size: 0.9375rem;
	line-height: 1.4;
	box-shadow: none;
}

.trikona-webinar-filter .em-search-text input:focus,
.trikona-webinar-filter__select:focus,
.trikona-webinar-filter .em-search-field select:focus,
.trikona-webinar-filter .em-datepicker-data input[type="date"]:focus {
	outline: none;
	border-color: #ffc000;
	box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.2);
}

.trikona-webinar-filter__label {
	display: block;
	margin: 0 0 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #475569;
}

.trikona-webinar-filter__hint {
	margin: 0 0 20px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #64748b;
}

.trikona-webinar-filter__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.trikona-webinar-filter__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.trikona-webinar-filter .em-datepicker-data {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 8px;
	align-items: center;
}

.trikona-webinar-filter .em-datepicker-data .separator {
	font-size: 0.8125rem;
	color: #94a3b8;
}

.trikona-webinar-filter .selectize-control {
	width: 100%;
}

.trikona-webinar-filter .selectize-input {
	min-height: 48px !important;
	padding: 10px 14px !important;
	border: 1px solid #dbe4ee !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: none !important;
}

.trikona-webinar-filter .selectize-input.focus {
	border-color: #ffc000 !important;
	box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.2) !important;
}

.trikona-webinar-filter__btn {
	min-height: 48px;
	padding: 0 24px !important;
	border-radius: 12px !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	cursor: pointer;
}

.trikona-webinar-filter__btn--primary {
	border: none !important;
	background: #ffc000 !important;
	color: #000 !important;
}

.trikona-webinar-filter__btn--primary:hover,
.trikona-webinar-filter__btn--primary:focus {
	background: #000 !important;
	color: #ffc000 !important;
}

.trikona-webinar-filter__btn--ghost {
	border: 1px solid #dbe4ee !important;
	background: #fff !important;
	color: #475569 !important;
}

.trikona-webinar-filter__btn--ghost:hover,
.trikona-webinar-filter__btn--ghost:focus {
	border-color: #ffc000 !important;
	background: #fff8e1 !important;
	color: #1b3b4c !important;
}

/* Modal shell */
.trikona-webinar-filter-modal .em-modal-popup,
.trikona-webinar-filter-modal__popup {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

.trikona-webinar-filter-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 24px 16px;
	border-bottom: 1px solid #eef2f7;
	background: #fff;
}

.trikona-webinar-filter-modal__eyebrow {
	display: block;
	margin-bottom: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
}

.trikona-webinar-filter-modal__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: #1b3b4c;
}

.trikona-webinar-filter-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: #64748b;
	text-decoration: none;
	font-size: 1.75rem;
	line-height: 1;
}

.trikona-webinar-filter-modal__close:hover,
.trikona-webinar-filter-modal__close:focus {
	background: #f1f5f9;
	color: #1b3b4c;
}

.trikona-webinar-filter-modal__content {
	padding: 20px 24px 8px;
	overflow: auto;
	max-height: calc(100vh - 240px);
}

.trikona-webinar-filter-modal__footer {
	padding: 16px 24px 24px;
	border-top: 1px solid #eef2f7;
	background: #fafbfc;
}

.trikona-webinar-filter-modal__footer-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.trikona-webinar-filter-modal .em-search-advanced-section > header {
	display: none;
}

.trikona-webinar-filter-modal .em-search-advanced-sections {
	padding: 0;
	border: 0;
	background: transparent;
}

@media (max-width: 767px) {
	.trikona-webinar-filter__row,
	.trikona-webinar-filter__grid {
		grid-template-columns: 1fr;
	}

	.trikona-webinar-filter-modal__footer-actions {
		flex-direction: column-reverse;
	}

	.trikona-webinar-filter-modal__footer-actions .trikona-webinar-filter__btn {
		width: 100%;
	}
}

/* ── Mobile: collapse the search bar behind a search-icon toggle ─────────────
   The full bar (search + dates + advanced + sort + submit) is hidden by default
   below 768px; tapping the icon button reveals it. Desktop keeps the bar visible
   and never shows the toggle button.
   !important is required: Events Manager's own
   `.em.em-search .em-search-main.em-search-main-bar { display: flex }` rule
   (events-manager.css) has higher specificity (4 classes) than a plain
   descendant override, so a bare `display: none` here is silently outranked. */
.trikona-webinar-filter-toggle {
	display: none;
}

@media (max-width: 767px) {
	/* Pull the listing up under the heading: the theme puts a 50px top margin on
	   .main-content (fine for desktop, dead space on a phone). Scoped with :has()
	   so only the events-search pages are affected. */
	.main-content:has(.em-events-search) {
		margin-top: 16px !important;
	}

	/* Collapsed state: with the search bar hidden behind the toggle icon, the
	   search container is an empty box — strip its padding/margin so it doesn't
	   leave a large gap between the heading and the first card. */
	.em.em-search.em-events-search.em-view-container {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Open state: restore side padding (so the card isn't edge-to-edge) plus a
	   little breathing room above the card and below it before the listing. */
	.em.em-search.em-events-search.em-view-container:has(.trikona-filter-open) {
		margin: 0 0 20px !important;
		padding: 4px 16px 0 !important;
	}

	/* .em-search-form has a plugin-default white background (`.em.pixelbones form`,
	   2 classes + 1 element, !important) meant to sit behind the visible bar. With
	   the bar hidden by default that white fill was showing through as a bare,
	   empty-looking full-width white bar behind just the icon. Kill it — needs 3
	   classes of specificity to beat the plugin rule — so the collapsed state is
	   just the icon on the page background, and the open state is just the search
	   card (which we give its own white background + card styling below). */
	.em.em-search .em-search-form {
		background: transparent !important;
	}

	.em-search-form .em-search-main.em-search-main-bar {
		display: none !important;
	}

	/* Open state: the bar becomes a self-contained white card (it is transparent
	   by default — on desktop its "card" look is inherited from the form bg we
	   just removed, so restyle it directly here). */
	.em.em-search .em-search-form.trikona-filter-open .em-search-main.em-search-main-bar {
		display: flex !important;
		background: #fff !important;
		border-radius: 16px !important;
		box-shadow: 0 6px 24px rgba(27, 59, 76, 0.10) !important;
	}

	/* Visual styling for the toggle, but it stays display:none (from the global
	   default above) while it is still inside the search form. It is only shown
	   once JS relocates it into the banner (rule below). This prevents a visible
	   load-time shift where the button first paints in the form (left, under the
	   heading) and then jumps to the banner (top-right). */
	.trikona-webinar-filter-toggle {
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1.5px solid #e5e7eb;
		border-radius: 12px;
		background: #fff;
		color: #1b3b4c;
		font-size: 1.05rem;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		cursor: pointer;
	}

	/* The toggle is relocated into the page banner by JS (see
	   webinar-search-filter.js) so it sits to the right of the heading, filling
	   the empty banner space. Only shown here — once it is a child of the banner —
	   so it never flashes in its original in-form position. */
	.banner-section:has(> .trikona-webinar-filter-toggle) {
		position: relative;
	}

	.banner-section > .trikona-webinar-filter-toggle {
		display: inline-flex;
		position: absolute;
		right: 16px;
		bottom: 16px;
		margin: 0;
	}

	.trikona-webinar-filter-toggle:hover,
	.trikona-webinar-filter-toggle:focus,
	.trikona-webinar-filter-toggle.is-active {
		outline: none;
		border-color: #ffc000;
		color: #12303f;
	}
}