/**
 * Shared button styles — ported from uncoder-io-os-based Button.sass
 * For template/socprime-page.php, the shared header (.header-fixed), and the editor canvas.
 */

.socprime-page-template .btn, .header-fixed .btn,
.editor-styles-wrapper .btn {
	padding: 0 10px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 36px;
	border-radius: 4px;
	border: 1px solid transparent;
	background-color: transparent;
	background: none;
	font-weight: 400;
	font-size: 14px;
	color: #292c3d;
	transition: background-color 0.1s, border-color 0.1s, color 0.1s;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}

.socprime-page-template .btn:disabled, .header-fixed .btn:disabled,
.socprime-page-template .btn.disabled, .header-fixed .btn.disabled,
.socprime-page-template .btn:disabled:hover, .header-fixed .btn:disabled:hover,
.socprime-page-template .btn.disabled:hover, .header-fixed .btn.disabled:hover,
.editor-styles-wrapper .btn:disabled,
.editor-styles-wrapper .btn.disabled,
.editor-styles-wrapper .btn:disabled:hover,
.editor-styles-wrapper .btn.disabled:hover {
	user-select: none;
	cursor: default;
}

.socprime-page-template .btn--medium, .header-fixed .btn--medium,
.editor-styles-wrapper .btn--medium {
	font-weight: 500;
}

.socprime-page-template .btn--semi, .header-fixed .btn--semi,
.editor-styles-wrapper .btn--semi {
	font-weight: 600;
}

.socprime-page-template .btn--upper, .header-fixed .btn--upper,
.editor-styles-wrapper .btn--upper {
	text-transform: uppercase;
}

.socprime-page-template .btn--link, .header-fixed .btn--link,
.editor-styles-wrapper .btn--link {
	height: auto;
	padding: 0;
	font-weight: 500;
	color: #4ac18e;
}

.socprime-page-template .btn--link:hover, .header-fixed .btn--link:hover,
.editor-styles-wrapper .btn--link:hover {
	text-decoration: underline;
}

.socprime-page-template .btn--green.btn--bg, .header-fixed .btn--green.btn--bg,
.editor-styles-wrapper .btn--green.btn--bg {
	position: relative;
	isolation: isolate;
	height: 48px;
	padding: 0 20px;
	color: #1a1e2f;
	background: linear-gradient(90deg, #49e0a0 0%, #50e9ff 100%);
	border: none;
	border-radius: 40px;
	font-weight: 600;
	box-shadow: none;
	transition: color 0.45s ease;
}

.socprime-page-template .btn--green.btn--bg::before, .header-fixed .btn--green.btn--bg::before,
.editor-styles-wrapper .btn--green.btn--bg::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #66f7ff 0%, #5cf2b8 100%);
	opacity: 0;
	transition: opacity 0.45s ease-in-out;
	z-index: -1;
}

.socprime-page-template .btn--green.btn--bg:hover, .header-fixed .btn--green.btn--bg:hover,
.editor-styles-wrapper .btn--green.btn--bg:hover {
	color: #1a1e2f;
	border: none;
	box-shadow: none;
	text-decoration: none;
}

.socprime-page-template .btn--green.btn--bg:hover::before, .header-fixed .btn--green.btn--bg:hover::before,
.editor-styles-wrapper .btn--green.btn--bg:hover::before {
	opacity: 1;
}

.socprime-page-template .btn--green.btn--border, .header-fixed .btn--green.btn--border,
.editor-styles-wrapper .btn--green.btn--border {
	height: 48px;
	padding: 0 20px;
	color: #f9f9f9;
	background: rgba(153, 155, 170, 0.1);
	border: 1px solid #8c8e97;
	border-radius: 40px;
	font-weight: 600;
}

.header-fixed .btn--green.btn--border {
	height: 40px;
}

.socprime-page-template .btn--green.btn--border:hover, .header-fixed .btn--green.btn--border:hover,
.editor-styles-wrapper .btn--green.btn--border:hover {
	color: #f9f9f9;
	background: rgba(153, 155, 170, 0.3);
	border: 1px solid #c8cad7;
	text-decoration: none;
}

.socprime-page-template .btn--green:disabled, .header-fixed .btn--green:disabled,
.socprime-page-template .btn--green.disabled, .header-fixed .btn--green.disabled,
.socprime-page-template .btn--green:disabled:hover, .header-fixed .btn--green:disabled:hover,
.socprime-page-template .btn--green.disabled:hover, .header-fixed .btn--green.disabled:hover,
.editor-styles-wrapper .btn--green:disabled,
.editor-styles-wrapper .btn--green.disabled,
.editor-styles-wrapper .btn--green:disabled:hover,
.editor-styles-wrapper .btn--green.disabled:hover {
	border-color: #3b3d4f;
	background: #3b3d4f;
	color: #cfd0d3;
	box-shadow: none;
	cursor: not-allowed;
}

.socprime-page-template .btn--green:disabled::before, .header-fixed .btn--green:disabled::before,
.socprime-page-template .btn--green.disabled::before, .header-fixed .btn--green.disabled::before,
.socprime-page-template .btn--green:disabled:hover::before, .header-fixed .btn--green:disabled:hover::before,
.socprime-page-template .btn--green.disabled:hover::before, .header-fixed .btn--green.disabled:hover::before,
.editor-styles-wrapper .btn--green:disabled::before,
.editor-styles-wrapper .btn--green.disabled::before,
.editor-styles-wrapper .btn--green:disabled:hover::before,
.editor-styles-wrapper .btn--green.disabled:hover::before {
	opacity: 0;
}

.socprime-page-template .btn--gray, .header-fixed .btn--gray,
.editor-styles-wrapper .btn--gray {
	background-color: #4e5060;
	color: #f9f9f9;
}

.socprime-page-template .btn--gray.btn--border, .header-fixed .btn--gray.btn--border,
.editor-styles-wrapper .btn--gray.btn--border {
	border-color: #4e5060;
	background-color: transparent;
}

.socprime-page-template .btn--gray.btn--border:hover, .header-fixed .btn--gray.btn--border:hover,
.editor-styles-wrapper .btn--gray.btn--border:hover {
	border-color: #4e5060;
	background-color: #4e5060;
}

.socprime-page-template .btn--gray.btn--bg, .header-fixed .btn--gray.btn--bg,
.editor-styles-wrapper .btn--gray.btn--bg {
	background-color: #3b3d4f;
}

.socprime-page-template .btn--gray.btn--bg:hover, .header-fixed .btn--gray.btn--bg:hover,
.editor-styles-wrapper .btn--gray.btn--bg:hover {
	background-color: #4e5060;
}

.socprime-page-template .btn--transparent, .header-fixed .btn--transparent,
.editor-styles-wrapper .btn--transparent {
	background-color: transparent;
	color: #f9f9f9;
}

.socprime-page-template .btn--transparent, .header-fixed .btn--transparent svg,
.editor-styles-wrapper .btn--transparent svg {
	font-size: 18px;
}

.socprime-page-template .btn--icon, .header-fixed .btn--icon,
.editor-styles-wrapper .btn--icon {
	padding: 0;
}

.socprime-page-template .btn--icon.btn--default, .header-fixed .btn--icon.btn--default,
.editor-styles-wrapper .btn--icon.btn--default {
	color: #cfd0d3;
}

.socprime-page-template .btn--end-icon, .header-fixed .btn--end-icon svg,
.editor-styles-wrapper .btn--end-icon svg {
	margin-left: 8px;
}

.socprime-page-template .btn--start-icon, .header-fixed .btn--start-icon svg,
.editor-styles-wrapper .btn--start-icon svg {
	margin-right: 8px;
}

.socprime-page-template .btn--l, .header-fixed .btn--l,
.editor-styles-wrapper .btn--l {
	height: 48px;
	font-size: 16px;
}

.socprime-page-template .btn--l.btn--icon, .header-fixed .btn--l.btn--icon,
.editor-styles-wrapper .btn--l.btn--icon {
	min-width: 48px;
}

.socprime-page-template .btn--m, .header-fixed .btn--m,
.editor-styles-wrapper .btn--m {
	height: 40px;
}

.socprime-page-template .btn--m.btn--icon, .header-fixed .btn--m.btn--icon,
.editor-styles-wrapper .btn--m.btn--icon {
	min-width: 40px;
}

.socprime-page-template .btn--xs, .header-fixed .btn--xs,
.editor-styles-wrapper .btn--xs {
	height: 30px;
	font-size: 12px;
}

.socprime-page-template .btn--xs.btn--icon, .header-fixed .btn--xs.btn--icon,
.editor-styles-wrapper .btn--xs.btn--icon {
	min-width: 30px;
}