/**
 * Buttons. WPBakery vc_btn3 (any color/shape, incl. the removed "turquoise"),
 * The7 buttons and form submits share one look.
 */

/* Primary look shared by every "main action" button on the site:
 * WPBakery / The7 buttons, form submits (Ninja Forms, CF7, Newsletter), FAQ button.
 * .b3d-btn--primary below uses the same values. */
#page .vc_general.vc_btn3,
#page .dt-btn,
#page .nf-form-content input[type="button"],
#page .nf-form-content input[type="submit"],
#page .wpcf7-submit,
#page .tnp-submit,
#page .b3d-faq-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px !important;
	border: 0 !important;
	border-radius: var(--b3d-radius) !important;
	background: var(--b3d-gradient) !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: .01em;
	text-decoration: none !important;
	box-shadow: var(--b3d-shadow-btn);
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	transition:
		transform var(--b3d-dur) var(--b3d-ease),
		box-shadow var(--b3d-dur) var(--b3d-ease),
		gap var(--b3d-dur) var(--b3d-ease) !important;
}

/* Darker layer fades in on hover (gradients can't transition directly) */
#page .vc_general.vc_btn3::before,
#page .dt-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, var(--b3d-cyan-700) 0%, var(--b3d-cyan-600) 100%);
	opacity: 0;
	transition: opacity var(--b3d-dur) var(--b3d-ease);
}

/* Arrow */
#page .vc_general.vc_btn3::after {
	content: "\2192";
	display: inline-block;
	font-size: 1.1em;
	line-height: 1;
	transition: transform var(--b3d-dur) var(--b3d-ease);
}

#page .vc_general.vc_btn3:hover,
#page .dt-btn:hover,
#page .nf-form-content input[type="button"]:hover,
#page .nf-form-content input[type="submit"]:hover,
#page .wpcf7-submit:hover,
#page .tnp-submit:hover,
#page .b3d-faq-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--b3d-shadow-btn-hover);
}

#page .vc_general.vc_btn3:hover::before,
#page .dt-btn:hover::before {
	opacity: 1;
}

#page .vc_general.vc_btn3:hover::after {
	transform: translateX(4px);
}

#page .vc_general.vc_btn3:active,
#page .dt-btn:active {
	transform: translateY(0);
	box-shadow: var(--b3d-shadow-btn);
}

#page .vc_general.vc_btn3:focus-visible,
#page .dt-btn:focus-visible {
	outline: 3px solid rgba(16, 222, 236, .45);
	outline-offset: 3px;
}

/* Buttons that already carry an icon don't need the arrow */
#page .vc_general.vc_btn3.vc_btn3-icon-left::after,
#page .vc_general.vc_btn3.vc_btn3-icon-right::after {
	content: none;
}

/* "Add icon" switched on but no icon chosen: hide the empty <i>, keep the arrow */
#page .vc_general.vc_btn3 .vc_btn3-icon:not([class*="fa-"]):not([class*="vc_li"]):not([class*="typcn"]):not([class*="entypo"]) {
	display: none !important;
}

#page .vc_general.vc_btn3:is(.vc_btn3-icon-left, .vc_btn3-icon-right):has(> .vc_btn3-icon:not([class*="fa-"]):not([class*="vc_li"]):not([class*="typcn"]):not([class*="entypo"]))::after {
	content: "\2192";
}

#page .vc_general.vc_btn3 .vc_btn3-icon {
	position: static !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	font-size: 1em;
}

/* Sizes */
#page .vc_general.vc_btn3.vc_btn3-size-lg {
	padding: 18px 34px !important;
	font-size: 16px !important;
}

#page .vc_general.vc_btn3.vc_btn3-size-sm,
#page .vc_general.vc_btn3.vc_btn3-size-xs {
	padding: 12px 20px !important;
	font-size: 14px !important;
}

/* Pink accent variant */
#page .vc_general.vc_btn3:is(.vc_btn3-color-pink, .vc_btn3-color-juicy-pink) {
	background: linear-gradient(135deg, #e04acf 0%, var(--b3d-pink) 100%) !important;
	box-shadow: 0 6px 16px rgba(244, 91, 226, .28);
}

#page .vc_general.vc_btn3:is(.vc_btn3-color-pink, .vc_btn3-color-juicy-pink)::before {
	background: linear-gradient(135deg, #c93cb9 0%, #e04acf 100%);
}

#page .vc_general.vc_btn3:is(.vc_btn3-color-pink, .vc_btn3-color-juicy-pink):hover {
	box-shadow: 0 12px 26px rgba(244, 91, 226, .38);
}

/* Secondary (text) button inside post grids: "Read more" */
#page .vc_grid-item .vc_general.vc_btn3 {
	padding: 0 !important;
	background: none !important;
	box-shadow: none;
	color: var(--b3d-cyan-600) !important;
	font-size: 15px !important;
}

#page .vc_grid-item .vc_general.vc_btn3::before {
	content: none;
}

#page .vc_grid-item .vc_general.vc_btn3:hover {
	transform: none;
	box-shadow: none;
	color: var(--b3d-cyan-700) !important;
	gap: 14px;
}

/* Spacing around WPBakery button containers */
#main .vc_btn3-container {
	margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
	#page .vc_general.vc_btn3,
	#page .dt-btn { transition: none !important; }
	#page .vc_general.vc_btn3:hover,
	#page .dt-btn:hover { transform: none; }
}

/* ---------- Theme button (.b3d-btn) for custom components ---------- */

.b3d-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	border: 1px solid transparent;
	border-radius: var(--b3d-radius);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform var(--b3d-dur) var(--b3d-ease),
		box-shadow var(--b3d-dur) var(--b3d-ease),
		background-color var(--b3d-dur) var(--b3d-ease),
		border-color var(--b3d-dur) var(--b3d-ease);
}

.b3d-btn__arrow {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	transition: transform var(--b3d-dur) var(--b3d-ease);
}

.b3d-btn:hover .b3d-btn__arrow {
	transform: translateX(4px);
}

.b3d-btn:focus-visible {
	outline: 3px solid rgba(16, 222, 236, .5);
	outline-offset: 3px;
}

.b3d-btn--primary {
	background: var(--b3d-gradient);
	color: #fff !important;
	box-shadow: var(--b3d-shadow-btn);
}

.b3d-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--b3d-shadow-btn-hover);
}

/* For dark backgrounds */
.b3d-btn--glass {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .28);
	color: #fff !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.b3d-btn--glass:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .5);
}

/* For light backgrounds (secondary action) */
.b3d-btn--outline {
	background: var(--b3d-surface);
	border-color: var(--b3d-logo-cyan);
	color: var(--b3d-ink) !important;
}

.b3d-btn--outline:hover {
	transform: translateY(-2px);
	background: var(--b3d-logo-cyan-50);
	box-shadow: var(--b3d-shadow-accent);
}

@media (prefers-reduced-motion: reduce) {
	.b3d-btn,
	.b3d-btn__arrow { transition: none; }
	.b3d-btn:hover { transform: none; }
}