/*
 * Evora Widgets – Global Utility Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Loaded site-wide (frontend + Elementor editor preview) so these classes are
 * available on ANY Elementor widget, container, Gutenberg block, or theme markup.
 *
 * Apply via Elementor → Advanced → CSS Classes (or a block's Additional CSS class):
 *   .glass              Frosted-glass backdrop blur + subtle border
 *   .colored_text       Wrap part of a heading in a <span> to brand-color it
 *   .bk-animated-button Hover sweep-fill — works on buttons AND any element
 *   .custom-accordion   Restyle Elementor's nested accordion
 *
 * Variants for .bk-animated-button (add alongside it):
 *   .bk-animated-button--violet | --indigo | --offwhite | --ghost
 */

/* ═══════════════════════════════════════════════════════════════════════════
 *  GLASS EFFECT
 * ═══════════════════════════════════════════════════════════════════════════ */
.glass {
	backdrop-filter: blur(17.75px);
	-webkit-backdrop-filter: blur(17.75px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  COLORED TEXT IN TITLES
 * ═══════════════════════════════════════════════════════════════════════════ */
.colored_text span {
	color: #7446FF !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  ANIMATED SWEEP-FILL  (.bk-animated-button)
 * ─────────────────────────────────────────────────────────────────────────────
 *  --btn-fill is the single source of truth for the fill color.
 *
 *  Two carriers are supported:
 *    1. Elementor Button widget — the class sits on the widget wrapper, so the
 *       effect is applied to the inner .elementor-button.
 *    2. Any other element (container, link, image-box, plain block) — when the
 *       class does NOT wrap an .elementor-button, the element ITSELF becomes the
 *       animated surface and its direct children are lifted above the fill.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Elementor button carrier ──────────────────────────────────────────────── */
.bk-animated-button .elementor-button {
	position: relative;
	overflow: hidden;
	transition: color 0.3s ease;
}

.bk-animated-button .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--btn-fill, #6121EB);
	transform: translate(100%, 100%) scale(0.2);
	transform-origin: bottom right;
	transition: transform 0.45s ease, border-radius 0.45s ease;
	z-index: 1;
	border-radius: 240px 0 0 0;
}

.bk-animated-button .elementor-button:hover::before {
	transform: translate(0, 0) scale(1);
	border-radius: inherit;
}

.bk-animated-button .elementor-button .elementor-button-content-wrapper,
.bk-animated-button .elementor-button .elementor-button-icon,
.bk-animated-button .elementor-button .elementor-button-text {
	position: relative;
	z-index: 2;
}

.bk-animated-button .elementor-button .elementor-button-icon {
	padding-top: 5px;
	transition: transform 0.3s ease, margin-inline-start 0.3s ease;
}

.bk-animated-button .elementor-button:hover .elementor-button-icon {
	transform: rotate(45deg);
	margin-inline-start: -5px;
}

/* ── Generic carrier (any element that does NOT wrap an Elementor button) ───── */
.bk-animated-button:not(:has(.elementor-button)) {
	position: relative;
	overflow: hidden;
	transition: color 0.3s ease;
}

.bk-animated-button:not(:has(.elementor-button))::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--btn-fill, #6121EB);
	transform: translate(100%, 100%) scale(0.2);
	transform-origin: bottom right;
	transition: transform 0.45s ease, border-radius 0.45s ease;
	z-index: 0;
	border-radius: 240px 0 0 0;
	pointer-events: none;
}

.bk-animated-button:not(:has(.elementor-button)):hover::before {
	transform: translate(0, 0) scale(1);
	border-radius: inherit;
}

/* Lift the element's own content above the fill */
.bk-animated-button:not(:has(.elementor-button)) > * {
	position: relative;
	z-index: 1;
}

/* ── Variants (one source of truth each) ───────────────────────────────────── */
.bk-animated-button--violet   { --btn-fill: #6121EB; }
.bk-animated-button--indigo   { --btn-fill: #7446FF; }
.bk-animated-button--offwhite { --btn-fill: #f0f0f0; }
.bk-animated-button--ghost    { --btn-fill: transparent; }

/* ── Shared transitions (apply to ANY trigger: :hover, .btn-active, or a
 *    consumer-specific state such as the careers card hover) ───────────────────
 *  These are component setup, not a trigger — they just make the icon rotation
 *  and the offwhite text/SVG recolor animate smoothly wherever they fire.
 */
.bk-animated-button .elementor-icon {
	display: inline-flex;
	transition: transform 0.3s ease;
}

.bk-animated-button--offwhite,
.bk-animated-button--offwhite .elementor-heading-title,
.bk-animated-button--offwhite h1,
.bk-animated-button--offwhite h2,
.bk-animated-button--offwhite h3,
.bk-animated-button--offwhite h4,
.bk-animated-button--offwhite h5,
.bk-animated-button--offwhite h6,
.bk-animated-button--offwhite p,
.bk-animated-button--offwhite a,
.bk-animated-button--offwhite span,
.bk-animated-button--offwhite svg,
.bk-animated-button--offwhite svg path {
	transition: color 0.3s ease, fill 0.3s ease;
}

/* ── Persistent active state (.btn-active) ─────────────────────────────────────
 *  Mirrors :hover so a clicked item can keep the filled look. Gated behind
 *  .evora-btn-scope (added to the loop widget) so only opted-in widgets react —
 *  no other button on the page is affected. Set by Loop Sync's JS.
 * ─────────────────────────────────────────────────────────────────────────── */
.evora-btn-scope .bk-animated-button.btn-active .elementor-button::before {
	transform: translate(0, 0) scale(1);
	border-radius: inherit;
}

.evora-btn-scope .bk-animated-button.btn-active:not(:has(.elementor-button))::before {
	transform: translate(0, 0) scale(1);
	border-radius: inherit;
}

.evora-btn-scope .bk-animated-button.btn-active .elementor-button .elementor-button-icon {
	transform: rotate(45deg);
	margin-inline-start: -5px;
}

.evora-btn-scope .bk-animated-button--offwhite.btn-active .elementor-button {
	color: var(--e-global-color-secondary);
}

.evora-btn-scope .bk-animated-button--offwhite.btn-active .elementor-button svg {
	fill: var(--e-global-color-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  CUSTOM ACCORDION  (Elementor nested accordion)
 * ═══════════════════════════════════════════════════════════════════════════ */
.custom-accordion .e-n-accordion-item-title {
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 0px solid rgba(255, 255, 255, 0.1) !important;
}

.custom-accordion .e-n-accordion-item-title .e-n-accordion-item-title-text > span {
	color: #DAD1F3;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
}

.custom-accordion details[open] > .e-n-accordion-item-title {
	border-radius: 5px 5px 0 0 !important;
}

/* Always show the e-closed icon, hide e-opened */
.custom-accordion .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-opened {
	display: none !important;
}

.custom-accordion .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-closed {
	display: inline-flex !important;
}

/* Rotate the single icon */
.custom-accordion .e-n-accordion-item-title .e-n-accordion-item-title-icon i {
	display: inline-block;
	transition: transform 0.3s ease;
}

.custom-accordion .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon i {
	transform: rotate(-90deg);
}

.custom-accordion details[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon i {
	transform: rotate(-180deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.bk-animated-button .elementor-button::before,
	.bk-animated-button:not(:has(.elementor-button))::before,
	.bk-animated-button .elementor-button .elementor-button-icon,
	.custom-accordion .e-n-accordion-item-title .e-n-accordion-item-title-icon i {
		transition: none;
	}
}