/**
 * Styles for the Fancy Elements dashboard page.
 *
 * @author    WP Square
 * @package   fancy-elements-avada
 */

.fea-dashboard {
	max-width: 1120px;
}

.fea-dashboard .fea-notice {
	margin: 0 0 20px;
}

/* --- Remote notices --- */
.fea-remote-notice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 16px;
	padding: 14px 44px 14px 18px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-left: 4px solid #72aee6;
	border-radius: 4px;
}

.fea-remote-notice--success {
	border-left-color: #65bc7b;
}

.fea-remote-notice--warning {
	border-left-color: #dba617;
}

.fea-remote-notice__body {
	flex: 1 1 auto;
	min-width: 0;
}

.fea-remote-notice__title {
	display: block;
	font-size: 14px;
}

.fea-remote-notice__text {
	display: block;
	margin-top: 2px;
	color: #50575e;
}

.fea-remote-notice__cta {
	flex: 0 0 auto;
}

.fea-remote-notice__dismiss {
	position: absolute;
	top: 10px;
	right: 10px;
	color: #a7aaad;
	text-decoration: none;
	line-height: 1;
}

.fea-remote-notice__dismiss:hover,
.fea-remote-notice__dismiss:focus {
	color: #d63638;
}

/* --- Header --- */
.fea-header {
	position: relative;
	overflow: hidden;
	margin: 20px 0;
	padding: 26px 30px;
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(18, 43, 30, 0.06);
}

.fea-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 5px;
	background: linear-gradient(180deg, #7cc98f 0%, #46a869 100%);
}

.fea-header__title {
	margin: 0 0 8px;
	padding: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: #1d2327;
}

.fea-header__subtitle {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #646970;
}

.fea-header__version {
	display: inline-flex;
	align-items: center;
	margin-top: 14px;
	padding: 3px 12px;
	background: #eef7f1;
	border: 1px solid #d3e9db;
	border-radius: 20px;
	color: #2c6e42;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --- Panels --- */
.fea-panel {
	margin: 0 0 20px;
	padding: 26px 30px;
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(18, 43, 30, 0.06);
}

.fea-panel > h2 {
	margin: 0 0 4px;
	padding: 0;
	font-size: 16px;
}

.fea-panel__intro {
	margin: 0 0 18px;
	max-width: 100%;
	color: #50575e;
}

/* --- Premium --- */
.fea-panel--premium {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
	background: linear-gradient(135deg, #f3fbf6 0%, #e7f5ed 100%);
	border-color: #cde6d6;
}

.fea-premium__intro {
	flex: 1 1 340px;
	padding: 30px 32px;
}

.fea-premium__intro h2 {
	margin: 14px 0 8px;
	font-size: 22px;
	font-weight: 700;
	color: #1d2327;
}

.fea-premium__intro p {
	margin: 0;
	max-width: 46ch;
	font-size: 14px;
	line-height: 1.6;
	color: #50575e;
}

.fea-premium__cta.button.button-primary {
	display: inline-flex;
	align-items: center;
	margin-top: 20px;
	height: auto;
	padding: 9px 22px;
	background: linear-gradient(135deg, #6fc487 0%, #46a869 100%);
	border: 0;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-shadow: none;
	box-shadow: 0 3px 8px rgba(70, 168, 105, 0.32);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fea-premium__cta.button.button-primary:hover,
.fea-premium__cta.button.button-primary:focus {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(70, 168, 105, 0.42);
}

.fea-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	background: linear-gradient(135deg, #6fc487 0%, #46a869 100%);
	border-radius: 20px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 2px 6px rgba(70, 168, 105, 0.3);
}

.fea-premium__features {
	flex: 1 1 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 30px 32px;
	list-style: none;
	background: rgba(255, 255, 255, 0.5);
	border-left: 1px solid #d7ebdf;
}

.fea-premium__features li {
	position: relative;
	margin: 0;
	padding-left: 32px;
	font-size: 14px;
	line-height: 1.5;
	color: #2c3338;
}

.fea-premium__features li::before {
	content: "\2713";
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: #65bc7b;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(70, 168, 105, 0.35);
}

/* --- Elements --- */
.fea-elements {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.fea-element {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 18px;
	border-bottom: 1px solid #f0f0f1;
}

.fea-element:last-child {
	border-bottom: 0;
}

.fea-element.is-off {
	background: #f6f7f7;
}

.fea-element:hover {
	background: #f6fbf7;
}

.fea-element.is-off:hover {
	background: #f0f0f1;
}

.fea-element__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	font-size: 20px;
	color: #65bc7b;
}

.fea-element.is-off .fea-element__icon {
	color: #8c8f94;
}

.fea-element__body {
	flex: 1 1 auto;
	min-width: 0;
}

.fea-element__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.fea-element__desc {
	display: block;
	margin-top: 2px;
	color: #50575e;
}

.fea-element__shortcode {
	flex: 0 0 auto;
	padding: 2px 8px;
	background: #f0f0f1;
	border-radius: 3px;
	color: #50575e;
	font-size: 11px;
	white-space: nowrap;
}

.fea-element.is-off .fea-element__shortcode {
	background: #e8e8e9;
}

/* --- Toggle switch ---
   Geometry and colours mirror the switch Avada Builder uses in its option
   panels (42x22 track, 16px handle, #93999f off / #198fd9 on) so the control
   feels like the rest of the builder. Prefixed rather than reusing Avada's
   generic .switch class, because that stylesheet is not loaded on this page
   and the bare name would be easy for another plugin to collide with. */
.fea-switch {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 42px;
	height: 22px;
	border-radius: 50px;
	cursor: pointer;
}

.fea-switch__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.fea-switch__track {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background: #93999f;
	border-radius: inherit;
	transition: background 0.25s ease;
	pointer-events: none;
}

.fea-switch__input:checked ~ .fea-switch__track {
	background: #198fd9;
}

.fea-switch__handle {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 1em;
	transition: left 0.15s ease-out;
	pointer-events: none;
}

.fea-switch__input:checked ~ .fea-switch__handle {
	left: 23px;
}

/* The input carries the focus but is transparent, so surface the ring here. */
.fea-switch__input:focus-visible ~ .fea-switch__track {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2271b1;
}

/* Older browsers without :focus-visible still get a visible ring. */
.fea-switch__input:focus ~ .fea-switch__track {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2271b1;
}

.fea-switch__input:focus:not(:focus-visible) ~ .fea-switch__track {
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.fea-switch__track,
	.fea-switch__handle {
		transition: none;
	}
}

@media screen and (max-width: 782px) {
	/* Name and description take the full width, with the icon, shortcode and
	   switch sharing the row beneath so the switch stays reachable. */
	.fea-element {
		flex-wrap: wrap;
		gap: 10px;
	}

	.fea-element__body {
		flex: 1 1 100%;
		order: 1;
	}

	.fea-element__icon {
		order: 2;
	}

	.fea-element__shortcode {
		flex: 1 1 auto;
		order: 3;
	}

	.fea-switch {
		order: 4;
	}

	/* Stacked premium columns: swap the divider from the side to the top. */
	.fea-premium__features {
		border-left: 0;
		border-top: 1px solid #d7ebdf;
	}
}

/* --- Tabs (Avada dashboard style) --- */
.fea-dashboard .fea-tabs {
	margin: 0;
	padding: 0 1.4em;
	background: #fff;
	border: 1px solid #e2e4e7;
	border-bottom: 1px solid #f0f0f1;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 1px 3px rgba(18, 43, 30, 0.06);
}

.fea-tabs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 -1.4em;
	padding: 0;
	list-style: none;
}

.fea-tabs__item {
	display: inline-block;
	position: relative;
	margin: 0 1.4em;
}

.fea-tabs__link {
	display: inline-flex;
	align-items: center;
	position: relative;
	gap: 8px;
	padding: 1.35em 0;
	color: #50575e;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	outline: none;
	box-shadow: none;
	transition: color 0.2s cubic-bezier(0.21, 0.6, 0.35, 1);
}

.fea-tabs__link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-bottom: 3px solid #198fd9;
	opacity: 0;
	transform: scaleX(0);
	transition: transform 0.2s cubic-bezier(0.21, 0.6, 0.35, 1),
		opacity 0.2s cubic-bezier(0.21, 0.6, 0.35, 1);
}

.fea-tabs__link:hover,
.fea-tabs__link:focus,
.fea-tabs__link.is-active {
	color: #198fd9;
	box-shadow: none;
}

.fea-tabs__link:hover::after,
.fea-tabs__link:focus::after,
.fea-tabs__link.is-active::after {
	opacity: 1;
	transform: scaleX(1);
}

.fea-tabs__link:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2271b1;
	border-radius: 2px;
}

.fea-tabs__icon {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

.fea-tabs + .fea-panel {
	border-top: 0;
	border-radius: 0 0 8px 8px;
}

/* --- Settings divider --- */
.fea-hr {
	margin: 28px 0 22px;
	border: 0;
	border-top: 1px solid #f0f0f1;
}

.fea-panel > h3 {
	margin: 0 0 4px;
	font-size: 14px;
}

/* --- Shared hint line --- */
.fea-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 22px 0 0;
	padding: 12px 14px;
	background: #f6f7f7;
	border-radius: 4px;
	color: #50575e;
}

.fea-hint .dashicons {
	flex: 0 0 auto;
	color: #8c8f94;
}

/* --- Getting started --- */
.fea-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fea-step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid #f0f0f1;
}

.fea-step:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.fea-step__number {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background: #65bc7b;
	border-radius: 50%;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
}

.fea-step__body {
	flex: 1 1 auto;
	min-width: 0;
}

.fea-step__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.fea-step__text {
	display: block;
	margin-top: 2px;
	color: #50575e;
}

/* --- Shortcode reference --- */
.fea-ref {
	padding: 18px 0;
	border-bottom: 1px solid #f0f0f1;
}

.fea-ref:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.fea-ref__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 14px;
}

.fea-ref__title .dashicons {
	color: #65bc7b;
}

.fea-ref__off {
	padding: 1px 8px;
	background: #f0f0f1;
	border-radius: 10px;
	color: #50575e;
	font-size: 11px;
	font-weight: 400;
}

.fea-ref__sc {
	margin: 0 0 10px;
}

.fea-ref__tag {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
}

.fea-ref__tag code {
	padding: 2px 8px;
	background: #eef7f1;
	color: #2c6e42;
	font-size: 12px;
}

.fea-ref__role {
	color: #8c8f94;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fea-ref__attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fea-ref__attrs li {
	margin: 0;
}

.fea-ref__attrs code {
	padding: 1px 7px;
	background: #f0f0f1;
	border-radius: 3px;
	color: #50575e;
	font-size: 11px;
}

.fea-ref__example-label {
	margin: 12px 0 4px;
	color: #8c8f94;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fea-ref__example {
	margin: 0;
	padding: 12px 14px;
	background: #1d2327;
	border-radius: 4px;
	overflow-x: auto;
}

.fea-ref__example code {
	background: none;
	padding: 0;
	color: #dcdcde;
	font-size: 12px;
	line-height: 1.6;
	white-space: pre;
}

/* --- What's new --- */
.fea-changes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fea-change {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid #f0f0f1;
}

.fea-change:last-child {
	border-bottom: 0;
}

.fea-change .dashicons {
	flex: 0 0 auto;
	color: #65bc7b;
}

/* --- Reset --- */
.fea-panel .button .dashicons {
	margin-right: 4px;
	vertical-align: middle;
	line-height: 1.4;
}