/* Header CTA button visual styles (بزن بریم)
 * 1 Soft (default) · 2 Solid · 3 Outline · 4 Underline · 5 Side accent · 6 Inverted
 */

.header-template-1 .action-box #action_link,
.header-template-2 .header-buttons > a.h-btn#action_link,
.siteside a.h-btn[class*="h-btn-style-"] {
	--ah-cta-color: var(--ahura-header-cta-text, #354ac4);
	--ah-cta-bg: var(--ahura-header-cta-bg, #e5e8ff);
}

.header-template-1 .action-box #action_link.after-login-btn,
.header-template-2 .header-buttons > a.h-btn#action_link.after-login-btn {
	--ah-cta-color: var(--ahura-header-cta-after-text, #35c454);
	--ah-cta-bg: var(--ahura-header-cta-after-bg, #e8ffe5);
}

.siteside a.h-btn[class*="h-btn-style-"] {
	--ah-cta-color: var(--ahura-mobile-menu-cta-text, #354ac4);
	--ah-cta-bg: var(--ahura-mobile-menu-cta-bg, #e5e8ff);
}

a.h-btn[class*="h-btn-style-"] {
	position: relative;
	isolation: isolate;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, letter-spacing .2s ease, padding .2s ease;
}

a.h-btn[class*="h-btn-style-"] .h-btn-label {
	position: relative;
	z-index: 1;
}

/* Icon support (off by default) */
a.h-btn.has-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
}

a.h-btn .h-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
	font-size: 1em;
	color: inherit;
}

a.h-btn .h-btn-icon .ah-theme-icon,
a.h-btn .h-btn-icon .ah-isax {
	font-size: 1em;
	color: inherit;
}

.header-template-2 .header-buttons > a.h-btn.has-icon {
	width: auto;
	min-width: 160px;
	padding-inline: 14px;
}

/* Style 1 — Soft (default): theme defaults only */

/* Style 2 — Solid: soft filled CTA with depth */
a.h-btn.h-btn-style-2 {
	color: #fff !important;
	background-color: var(--ah-cta-color) !important;
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, #fff 18%, var(--ah-cta-color)) 0%,
		var(--ah-cta-color) 55%,
		color-mix(in srgb, #000 8%, var(--ah-cta-color)) 100%
	) !important;
	border: none !important;
	font-weight: 600;
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
		0 6px 16px -4px color-mix(in srgb, var(--ah-cta-color) 45%, transparent);
}

a.h-btn.h-btn-style-2:hover {
	color: #fff !important;
	background-color: var(--ah-cta-color) !important;
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, #fff 26%, var(--ah-cta-color)) 0%,
		var(--ah-cta-color) 50%,
		color-mix(in srgb, #000 4%, var(--ah-cta-color)) 100%
	) !important;
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
		0 10px 22px -4px color-mix(in srgb, var(--ah-cta-color) 50%, transparent);
}

a.h-btn.h-btn-style-2:active {
	transform: translateY(0);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
		0 3px 10px -2px color-mix(in srgb, var(--ah-cta-color) 40%, transparent);
}

/* Style 3 — Outline: white frame, clearly empty vs soft fill */
a.h-btn.h-btn-style-3 {
	color: var(--ah-cta-color) !important;
	background-color: #fff !important;
	background-image: none !important;
	border: 2px solid var(--ah-cta-color) !important;
	font-weight: 600;
	box-shadow: none;
}

a.h-btn.h-btn-style-3:hover {
	color: var(--ah-cta-color) !important;
	background-color: var(--ah-cta-bg) !important;
	border-color: var(--ah-cta-color) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ah-cta-color) 14%, transparent);
}

/* Style 4 — Underline: text link look with thick accent line */
a.h-btn.h-btn-style-4 {
	color: var(--ah-cta-color) !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-weight: 600;
	padding-left: 4px !important;
	padding-right: 4px !important;
	padding-bottom: 6px !important;
	box-shadow: inset 0 -3px 0 var(--ah-cta-color) !important;
}

a.h-btn.h-btn-style-4:hover {
	color: var(--ah-cta-color) !important;
	background-color: transparent !important;
	box-shadow: inset 0 -3px 0 var(--ah-cta-color) !important;
	letter-spacing: .04em;
}

/* Header templates often force width — let underline breathe */
.header-template-2 .header-buttons > a.h-btn.h-btn-style-4 {
	width: auto;
	min-width: 0;
	height: auto;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* Style 5 — Side accent: soft fill + thick start edge */
a.h-btn.h-btn-style-5 {
	color: var(--ah-cta-color) !important;
	background-color: var(--ah-cta-bg) !important;
	background-image: none !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 600;
	box-shadow: none;
	padding-inline-start: 18px !important;
}

a.h-btn.h-btn-style-5::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 4px;
	background-color: var(--ah-cta-color);
	border-start-start-radius: 8px;
	border-end-start-radius: 8px;
	pointer-events: none;
}

a.h-btn.h-btn-style-5:hover {
	color: var(--ah-cta-color) !important;
	background-color: color-mix(in srgb, var(--ah-cta-bg) 70%, var(--ah-cta-color)) !important;
}

/* Style 6 — Inverted: brand fill with soft ring */
a.h-btn.h-btn-style-6 {
	color: var(--ah-cta-bg) !important;
	background-color: var(--ah-cta-color) !important;
	background-image: none !important;
	border: none !important;
	font-weight: 600;
	box-shadow: 0 0 0 3px var(--ah-cta-bg), 0 0 0 5px color-mix(in srgb, var(--ah-cta-color) 45%, transparent);
}

a.h-btn.h-btn-style-6:hover {
	color: #fff !important;
	background-color: var(--ah-cta-color) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ah-cta-bg) 80%, #fff), 0 0 0 6px color-mix(in srgb, var(--ah-cta-color) 55%, transparent);
}

@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
	a.h-btn.h-btn-style-2 {
		background-image: none !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px -4px rgba(53, 74, 196, 0.4);
	}
	a.h-btn.h-btn-style-2:hover {
		background-image: none !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px -4px rgba(53, 74, 196, 0.45);
	}
	a.h-btn.h-btn-style-3:hover {
		box-shadow: 0 0 0 3px rgba(53, 74, 196, 0.14);
	}
	a.h-btn.h-btn-style-5:hover {
		background-color: var(--ah-cta-bg) !important;
		opacity: 0.92;
	}
	a.h-btn.h-btn-style-6 {
		box-shadow: 0 0 0 3px #e5e8ff, 0 0 0 5px rgba(53, 74, 196, 0.35);
	}
	a.h-btn.h-btn-style-6:hover {
		box-shadow: 0 0 0 3px #eef0ff, 0 0 0 6px rgba(53, 74, 196, 0.45);
	}
}