/* =========================================================================
   ZYRA — brand styling for Elementor's NATIVE Accordion / Toggle / Tabs
   Covers classic widgets (.elementor-accordion / -toggle / -tabs) AND the
   newer nested widgets (.e-n-accordion / .e-n-tabs). Loads globally, so any
   native accordion or tabs widget on the site is auto-branded.
   To opt a single widget OUT, add the CSS class  zy-plain  to it.
   ========================================================================= */

/* ---------- shared tokens ---------- */
.elementor-accordion,
.elementor-toggle,
.e-n-accordion,
.elementor-tabs,
.e-n-tabs {
	--zyacc-radius: var(--zy-radius-lg, 12px);
	font-family: var(--zy-font, 'Inter', sans-serif);
}

/* =========================================================================
   ACCORDION + TOGGLE  (classic)
   ========================================================================= */
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-accordion-item,
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-toggle-item {
	border: 1px solid var(--zy-border) !important;
	border-radius: var(--zyacc-radius);
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--zy-bg);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* header row */
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-tab-title {
	border: 0 !important;
	background: transparent !important;
	padding: 18px 22px;
	font-family: var(--zy-font, 'Inter', sans-serif);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	color: var(--zy-fg) !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	transition: color .15s ease, background .15s ease;
}
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-tab-title:hover {
	background: var(--zy-surface) !important;
}
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-tab-title .elementor-accordion-title {
	color: inherit !important;
	text-decoration: none;
	flex: 1;
}

/* active item: purple title + 4px left accent (the Zyra card motif) */
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-accordion-item:has(.elementor-tab-title.elementor-active),
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-toggle-item:has(.elementor-tab-title.elementor-active) {
	border-left: 4px solid var(--zy-primary) !important;
}
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-tab-title.elementor-active {
	color: var(--zy-primary) !important;
	font-weight: 600;
}

/* replace Elementor's +/- glyph with a clean brand chevron */
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-accordion-icon {
	display: none !important;
}
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-tab-title::after {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: no-repeat center / 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	transition: transform .2s ease;
}
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-tab-title.elementor-active::after {
	transform: rotate(180deg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23534AB7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* content panel */
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-tab-content {
	border: 0 !important;
	background: transparent !important;
	padding: 0 22px 20px !important;
	color: var(--zy-text-secondary);
	font-size: 15px;
	line-height: 1.7;
}
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-tab-content p { margin: 0 0 12px; }
:where(.elementor-widget-accordion, .elementor-widget-toggle):not(.zy-plain) .elementor-tab-content strong { color: var(--zy-fg); font-weight: 600; }

/* =========================================================================
   NESTED ACCORDION  (.e-n-accordion — <details>/<summary>)
   ========================================================================= */
.e-n-accordion:not(.zy-plain) .e-n-accordion-item {
	border: 1px solid var(--zy-border) !important;
	border-radius: var(--zyacc-radius) !important;
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--zy-bg);
}
.e-n-accordion:not(.zy-plain) .e-n-accordion-item[open] {
	border-left: 4px solid var(--zy-primary) !important;
}
.e-n-accordion:not(.zy-plain) .e-n-accordion-item-title {
	padding: 18px 22px !important;
	font-family: var(--zy-font, 'Inter', sans-serif) !important;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	color: var(--zy-fg);
	background: transparent !important;
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
}
.e-n-accordion:not(.zy-plain) .e-n-accordion-item-title:hover { background: var(--zy-surface); }
.e-n-accordion:not(.zy-plain) .e-n-accordion-item[open] .e-n-accordion-item-title,
.e-n-accordion:not(.zy-plain) .e-n-accordion-item[open] .e-n-accordion-item-title-text {
	color: var(--zy-primary) !important;
	font-weight: 600;
}
.e-n-accordion:not(.zy-plain) .e-n-accordion-item-title-text { font-family: inherit !important; }

/* chevron for nested (swap the default icon spans for one brand chevron) */
.e-n-accordion:not(.zy-plain) .e-n-accordion-item-title-icon > .e-opened,
.e-n-accordion:not(.zy-plain) .e-n-accordion-item-title-icon > .e-closed { display: none !important; }
.e-n-accordion:not(.zy-plain) .e-n-accordion-item-title-icon::after {
	content: "";
	display: block;
	width: 20px; height: 20px;
	background: no-repeat center / 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	transition: transform .2s ease;
}
.e-n-accordion:not(.zy-plain) .e-n-accordion-item[open] .e-n-accordion-item-title-icon::after {
	transform: rotate(180deg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23534AB7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.e-n-accordion:not(.zy-plain) .e-n-accordion-item-content {
	padding: 0 22px 20px !important;
	color: var(--zy-text-secondary);
	font-size: 15px;
	line-height: 1.7;
}
.e-n-accordion:not(.zy-plain) .e-n-accordion-item-content strong { color: var(--zy-fg); font-weight: 600; }

/* =========================================================================
   TABS  (classic .elementor-tabs)
   ========================================================================= */
.elementor-widget-tabs:not(.zy-plain) .elementor-tabs-wrapper { border: 0 !important; }
.elementor-widget-tabs:not(.zy-plain) .elementor-tab-title {
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	background: transparent !important;
	padding: 12px 18px !important;
	font-family: var(--zy-font, 'Inter', sans-serif);
	font-weight: 500;
	font-size: 15px;
	color: var(--zy-text-muted) !important;
	transition: color .15s ease, border-color .15s ease;
}
.elementor-widget-tabs:not(.zy-plain) .elementor-tab-title:hover { color: var(--zy-fg) !important; }
.elementor-widget-tabs:not(.zy-plain) .elementor-tab-title.elementor-active {
	color: var(--zy-primary) !important;
	border-bottom-color: var(--zy-primary) !important;
	background: transparent !important;
}
.elementor-widget-tabs:not(.zy-plain) .elementor-tabs-content-wrapper { border: 0 !important; }
.elementor-widget-tabs:not(.zy-plain) .elementor-tab-content {
	border: 0 !important;
	padding: 24px 2px 0 !important;
	color: var(--zy-text-secondary);
	font-size: 15px;
	line-height: 1.7;
}

/* =========================================================================
   NESTED TABS  (.e-n-tabs)
   ========================================================================= */
.e-n-tabs:not(.zy-plain) .e-n-tabs-heading { border-bottom: 1px solid var(--zy-border); gap: 4px; }
.e-n-tabs:not(.zy-plain) .e-n-tab-title {
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	background: transparent !important;
	padding: 12px 18px !important;
	font-family: var(--zy-font, 'Inter', sans-serif) !important;
	font-weight: 500;
	font-size: 15px;
	color: var(--zy-text-muted) !important;
	border-radius: 0 !important;
	transition: color .15s ease, border-color .15s ease;
}
.e-n-tabs:not(.zy-plain) .e-n-tab-title:hover { color: var(--zy-fg) !important; }
.e-n-tabs:not(.zy-plain) .e-n-tab-title[aria-selected="true"] {
	color: var(--zy-primary) !important;
	border-bottom-color: var(--zy-primary) !important;
	background: transparent !important;
}
.e-n-tabs:not(.zy-plain) .e-n-tab-title-text { font-family: inherit !important; }
.e-n-tabs:not(.zy-plain) .e-n-tabs-content { padding-top: 24px; color: var(--zy-text-secondary); font-size: 15px; line-height: 1.7; }

/* amber + teal accent variants — add class zy-acc-amber or zy-acc-teal to the widget */
.zy-acc-amber .elementor-accordion-item:has(.elementor-tab-title.elementor-active),
.zy-acc-amber.e-n-accordion .e-n-accordion-item[open] { border-left-color: var(--zy-secondary) !important; }
.zy-acc-amber .elementor-tab-title.elementor-active,
.zy-acc-amber.e-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title { color: var(--zy-secondary) !important; }
.zy-acc-teal .elementor-accordion-item:has(.elementor-tab-title.elementor-active),
.zy-acc-teal.e-n-accordion .e-n-accordion-item[open] { border-left-color: var(--zy-tertiary) !important; }
.zy-acc-teal .elementor-tab-title.elementor-active,
.zy-acc-teal.e-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title { color: var(--zy-tertiary) !important; }