/*!
Theme Name: TradeScale
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tradescale
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

TradeScale is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	padding: 0;
	margin: 0;
	font-family: "Figtree", sans-serif!important;
}

/* Landing Page CSS */
.comp-col-small {
	width: min(calc(100% - 28px), 512px);
	margin-inline: auto;
}

.comp-col-medium {
	width: min(calc(100% - 28px), 646px);
	margin-inline: auto;
}

.comp-btn-orange {
	display: block;
	padding: 17px;
	margin-inline: auto;

	background: linear-gradient(92.95deg, #f3981f 0%, #e57625 100%);
	box-shadow: 0px 2px 21.2px 0px #f3981f63;
	border-radius: 6px;
	border: 0;

	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;

	cursor: pointer;

	&:hover,
	&:focus-visible {
		background: linear-gradient(92.95deg, #f3981f 0%, #e57625 100%);
		color: #fff;
	}

	&.text-large {
		padding: 20px;
		font-size: 1.375rem;
		line-height: 1.18;
	}
}

.comp-header {
	font-family: "Figtree", sans-serif;

	position: relative;
	font-family: inherit;

	padding-block: 10px 73px;
	background: #090b06;

	@media (min-width: 768px) {
		padding-block: 30px 44px;
	}

	picture {
		display: block;
		width: 100%;

		&.logo {
			max-width: 58px;
			margin: 0 auto 14px;

			@media (min-width: 768px) {
				max-width: 100px;
				margin-bottom: 28px;
			}
		}

		&.banner-image {
			margin-inline: auto;
			max-width: 646px;
		}

		img {
			display: block;
			width: 100%;
		}
	}

	h1 {
		margin: 0 0 5px;
		font-weight: 700;
		font-size: 2.625rem;
		font-size: clamp(2.3125rem, -0.3661rem + 11.9048vw, 2.625rem);
		line-height: 1.1;
		color: #ffaf45;
		text-align: center;

		@media (min-width: 768px) {
			margin-bottom: 9px;
		}
	}

	p {
		margin: 0 0 16px;
		font-weight: 500;
		font-size: 1.25rem;
		font-size: clamp(1.125rem, 0.0536rem + 4.7619vw, 1.25rem);
		line-height: 1.2;
		color: #b4b4b4;
		text-align: center;

		@media (min-width: 768px) {
			margin-bottom: 10px;
		}

		&.top-text {
			margin: 0 0 7px;
			font-size: 1.875rem;
			font-size: clamp(1.6875rem, 0.0804rem + 7.1429vw, 1.875rem);

			@media (min-width: 768px) {
				margin-bottom: 9px;
			}
		}

		&.max-width-sm-450 {
			@media (min-width: 768px) {
				max-width: 450px;
				margin-inline: auto;
			}
		}
	}

	.comp-btn-orange {
		position: relative;
		margin-top: -5px;
		margin-bottom: 40px;
		z-index: 5;

		@media (min-width: 768px) {
			margin-top: -47px;
		}
	}

	ul {
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 35px;
		color: #ffaf45;
		list-style: disc;

		p {
			margin: 0;
			font-weight: 500;
			font-size: 1rem;
			line-height: 1.2;
			color: #ffaf45;
		}
	}
}

.comp-content {
	font-family: "Figtree", sans-serif;

	padding-block: 64px 100px;
	background: #fff;

	@media (min-width: 768px) {
		padding-bottom: 164px;
	}

	h2 {
		margin: 0 0 34px;
		font-weight: 700;
		font-size: 2.5rem;
		font-size: clamp(2.125rem, -1.0893rem + 14.2857vw, 2.5rem);
		line-height: 1.05;
		color: #141213;
		text-align: center;
	}

	h3 {
		margin: 0 0 34px;
		font-weight: 700;
		font-size: 1.875rem;
		font-size: clamp(1.625rem, -0.5179rem + 9.5238vw, 1.875rem);
		line-height: 1.05;
		color: #141213;
	}

	p {
		margin: 0 0 26px;
		font-weight: 400;
		font-size: 1.25rem;
		font-size: clamp(1.125rem, 0.0536rem + 4.7619vw, 1.25rem);
		line-height: 1.3;
		color: #141213;

		b {
			font-weight: 700;
		}

		i {
			font-style: italic;
		}

		&.small-text {
			font-size: 1rem;
		}

		&.text-center {
			text-align: center;
		}

		&.with-number {
			margin-bottom: 14px;
			font-weight: 700;

			display: flex;
			align-items: start;
			gap: 10px;

			&:last-child {
				margin-bottom: 64px;
			}

			.number {
				flex-shrink: 0;
				width: 28px;
				height: 28px;
				border-radius: 50%;
				background: #e4823a;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		&.with-icon {
			span {
				display: flex;
				align-self: start;
				gap: 10px;
			}

			.icon {
				flex-shrink: 0;
				width: 15px;
			}
		}

		&.mb-0 {
			margin-bottom: 0;
		}

		&.mb-34 {
			margin-bottom: 34px;
		}

		&.mb-64 {
			margin-bottom: 64px;
		}

		&.mb-25-29 {
			margin-bottom: 25px;

			@media (min-width: 768px) {
				margin-bottom: 29px;
			}
		}

		&.mb-63-91 {
			margin-bottom: 63px;

			@media (min-width: 768px) {
				margin-bottom: 91px;
			}
		}
	}

	.yellow-box {
		margin-block: 64px 25px;
		padding: 26px 16px 38px;
		background: #fff9f1;

		@media (min-width: 768px) {
			margin-bottom: 29px;
		}

		.yellow-box-inner {
			max-width: 324px;
			margin-inline: auto;
		}

		h2 {
			margin-bottom: 20px;
		}

		p {
			margin-bottom: 16px;
			font-weight: 700;
			color: #000;

			display: flex;
			align-items: start;
			gap: 11px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.icon {
			margin-top: 3px;
			flex-shrink: 0;
			width: 18px;
		}
	}

	.comp-btn-orange {
		margin-bottom: 64px;
	}

	.image-wrapper {
		margin-bottom: 16px;

		@media (min-width: 500px) {
			background: #251811;
			border-radius: 10px;
		}

		@media (min-width: 768px) {
			margin-bottom: 34px;
		}

		.user-image {
			margin-inline: auto;
			display: block;
			width: 100%;
			max-width: 370px;
			border-radius: 10px;

			@media (min-width: 768px) {
				max-width: 300px;
			}
		}
	}

	.comp-orange-box {
		padding: 34px 8px 35px;
		margin-bottom: 64px;
		margin-inline: auto;
		width: min(calc(100% - 12px), 646px);

		background: linear-gradient(7.64deg, #bc4408 14.62%, #e5833c 83.29%, #de7826 96.65%);
		border-radius: 10px;

		@media (min-width: 768px) {
			padding: 34px 67px 68px;
		}

		h2 {
			margin: 0 0 5px;
			font-weight: 900;
			font-size: 3.75rem;
			font-size: clamp(3.3125rem, -0.4375rem + 16.6667vw, 3.75rem);
			line-height: 1.05;
			color: #fff;
			text-align: center;
		}

		h3 {
			margin: 0 0 25px;
			font-weight: 600;
			font-size: 1.625rem;
			font-size: clamp(1.4375rem, -0.1696rem + 7.1429vw, 1.625rem);
			line-height: 1.3;
			color: #fff;
			text-align: center;
		}

		p {
			margin-bottom: 20px;
			color: #fff;

			@media (min-width: 768px) {
				margin-bottom: 34px;
			}
		}

		.box-row {
			padding: 12px 11px;
			max-width: 512px;
			margin: 0 auto 15px;

			background: linear-gradient(#e57625, #e57625) padding-box, linear-gradient(180deg, #fff, #999) border-box;
			border: 1px solid transparent;
			border-radius: 14px;

			display: flex;
			align-items: center;
			gap: 6px;

			@media (min-width: 768px) {
				padding: 16px 14px;
				border-radius: 19px;
				gap: 8px;
				border-width: 1.38px;
			}

			&:last-child {
				margin-bottom: 0;
			}

			.icon {
				flex-shrink: 0;
				width: 60px;

				@media (min-width: 768px) {
					width: 83px;
				}
			}

			p {
				margin: 0;
				font-weight: 700;
				font-size: 1.25rem;
				font-size: clamp(1.0625rem, -0.5446rem + 7.1429vw, 1.25rem);
				line-height: 1;
				color: #fff;

				@media (min-width: 768px) {
					font-size: 1.625rem;
				}
			}
		}
	}

	.bonus-wrapper {
		width: min(calc(100% - 12px), 512px);
		margin: 0 auto 64px;
		padding: 20px 16px;
		background: #221307;
		border-radius: 10px;

		@media (min-width: 768px) {
			padding: 26px 51px;
		}

		h2 {
			margin-bottom: 14px;
			color: #fff;

			@media (min-width: 768px) {
				margin-bottom: 20px;
			}
		}

		.bonus-image {
			display: block;
			width: 100%;
			max-width: 190px;
			margin: 0 auto 14px;
			border: 1px solid #6c4b30;
			border-radius: 3px;

			@media (min-width: 768px) {
				margin-bottom: 20px;
			}
		}

		p {
			margin-bottom: 0;
			font-weight: 600;
			line-height: 1.2;
			color: #fff;
			text-align: center;
		}
	}

	.brand-image {
		display: block;
		width: calc(100% - 12px);
		max-width: 512px;
		margin: 0 auto 64px;
		border-radius: 16px;
	}
}

.comp-form-wrapper {
	font-family: "Figtree", sans-serif;

	width: min(calc(100% - 12px), 646px);
	margin-inline: auto;
	padding: 24px 15px;

	border-radius: 10px;
	background: #bc4408;
	background: linear-gradient(352deg, rgba(188, 68, 8, 1) 6%, rgba(229, 131, 60, 1) 85%, rgba(222, 120, 38, 1) 100%);
	background: linear-gradient(to bottom right, #191411 30%, #3a2313 65%, #542b0e 100%);

	@media (min-width: 768px) {
		padding-inline: 67px;
	}

	&.has-mb {
		margin-bottom: 25px;

		@media (min-width: 768px) {
			margin-bottom: 29px;
		}
	}

	h2 {
		margin: 0 0 23px;
		font-weight: 700;
		font-size: 2.5rem;
		font-size: clamp(2.1875rem, -0.4911rem + 11.9048vw, 2.5rem);
		line-height: 1.3;
		color: #ffaf45;
		text-align: center;
	}

	h3 {
		margin: 0 0 23px;
		font-weight: 600;
		font-size: 1.625rem;
		font-size: clamp(1.4375rem, -0.1696rem + 7.1429vw, 1.625rem);
		line-height: 1.3;
		color: #fff;
		text-align: center;

		&.yellow-text {
			font-weight: 700;
			color: #ffaf45;
		}
	}

	p {
		margin: 0 0 23px;
		font-weight: 400;
		font-size: 1.25rem;
		font-size: clamp(1.125rem, 0.0536rem + 4.7619vw, 1.25rem);
		line-height: 1.3;
		color: #fff;
		text-align: center;

		&.small-text {
			margin-bottom: 20px;
			font-size: 1rem;
			color: #e0dcd5;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&.text-left {
			text-align: left;
		}
	}

	.custom-form {
		max-width: 356px;
		margin-inline: auto;
		margin-bottom: 23px;
	}
}

.comp-footer {
	font-family: "Figtree", sans-serif;

	padding-block: 27px 36px;
	background: #191817;

	@media (min-width: 768px) {
		padding-block: 70px;
	}

	.wrapper {
		width: min(calc(100% - 28px), 1274px);
		margin-inline: auto;
	}

	p {
		margin: 0 0 20px;
		font-weight: 300;
		font-size: 0.875rem;
		line-height: 1.57;
		color: #b3afa9;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.top-row {
		@media (min-width: 992px) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 55px;
		}
	}

	.sec-menu-wrapper {
		@media (min-width: 992px) {
			order: 2;
		}

		ul {
			margin: 0 0 24px;
			padding: 0;
			list-style: none;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			gap: 18px 40px;

			@media (min-width: 768px) {
				gap: 18px 30px;
			}

			@media (min-width: 992px) {
				order: 1;
				margin-bottom: 0;
			}
		}

		a {
			text-decoration: none;
			font-weight: 500;
			font-size: 1rem;
			line-height: 1.03;
			color: #fff;

			&:hover,
			&:focus-visible {
				color: #fff;
				text-decoration: none;
			}

			@media (min-width: 768px) {
				line-height: 1.3;
			}
		}
	}

	.payment-wrapper {
		margin-bottom: 24px;

		@media (min-width: 992px) {
			margin-bottom: 0;
			order: 3;
		}

		p {
			margin-bottom: 8px;
			font-weight: 400;
			color: #fff;
			text-align: center;

			@media (min-width: 992px) {
				text-align: right;
			}
		}

		.payment-image {
			display: block;
			width: 100%;
			max-width: 256px;
			margin: 0 auto;

			@media (min-width: 992px) {
				max-width: 246px;
				margin-inline: auto 0;
			}
		}
	}

	.copy-text-wrapper {
		margin-bottom: 24px;

		@media (min-width: 992px) {
			margin-bottom: 0;
			order: 1;
		}

		p {
			text-align: center;

			@media (min-width: 992px) {
				text-align: left;
			}
		}
	}
}

.comp-v4-header {
	padding-bottom: 30px;

	@media (min-width: 768px) {
		padding-bottom: 44px;
	}

	.comp-form-wrapper {
		margin-top: -20px;
		position: relative;
		z-index: 4;
		
		background: linear-gradient(to bottom right, #542b0e 20%, #3a2313 60%, #191411 100%);

		h2 {
			font-size: 2.125rem;
		}
	}
}

.comp-v4-content {
	.yellow-box {
		margin-block: 0 64px;
	}

	.brand-image {
		margin-bottom: 34px;
	}

	.comp-btn-orange {
		margin-bottom: 0;
	}
}

.comp-v5-header {
	padding-bottom: 40px;
	background: #141213;

	h1 {
		margin-bottom: 10px;
		position: relative;
		z-index: 5;
	}

	p {
		position: relative;
		z-index: 5;
	}

	.video-wrapper {
		position: relative;
		width: min(100%, 646px);
		padding-inline: 16px;
		margin: 26px auto;
		border-radius: 6px;
		isolation: isolate;

		.video-shadow {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: -1;
			width: 100%;
			max-width: 700px;
		}

		iframe {
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
		}
	}

	.click-to-form {
		display: flex;
		flex-direction: column;
		align-items: center;

		p {
			margin: 0 0 20px;
			font-weight: 400;
			font-size: 1.25rem;
			line-height: 1.2;
			color: #b4b4b4;
			text-align: center;
		}

		a {
			text-decoration: none;

			&:hover,
			&:focus-visible {
				text-decoration: none;
			}
		}

		.arrow-icon {
			display: block;
			width: 20px;
		}
	}
}

.comp-v5-content {
	padding: 32px 0 100px;

	.custom-form {
		margin-bottom: 36px;
	}

	.form-bottom-text {
		font-weight: 300;
	}
}

.comp-v6-header {
	padding-bottom: 100px;
	background: #141213;

	h1 {
		margin-bottom: 10px;
	}

	p {
		position: relative;
		z-index: 5;
	}

	.video-wrapper {
		position: relative;
		width: min(100%, 646px);
		padding-inline: 16px;
		margin: 26px auto;
		border-radius: 6px;
		isolation: isolate;

		.video-shadow {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: -1;
			width: 100%;
			max-width: 700px;
		}

		iframe {
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
		}
	}

	.click-to-form {
		margin-bottom: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;

		p {
			margin: 0 0 20px;
			font-weight: 400;
			font-size: 1.25rem;
			line-height: 1.2;
			color: #b4b4b4;
			text-align: center;
		}

		a {
			text-decoration: none;

			&:hover,
			&:focus-visible {
				text-decoration: none;
			}
		}

		.arrow-icon {
			display: block;
			width: 20px;
		}
	}

	.comp-form-wrapper {
		padding: 1px;
		background: linear-gradient(to bottom right, #484541 30%, #5b4a3f 65%, #503625 100%);

		@media (min-width: 768px) {
			padding: 1px;
		}

		h2 {
			margin-bottom: 0;
		}

		p {
			font-weight: 300;
		}
	}

	.comp-form-wrapper-inner {
		border-radius: 10px;
		padding: 30px 15px 24px;
		background: linear-gradient(to bottom right, #191411 30%, #3a2313 65%, #542b0e 100%);

		@media (min-width: 768px) {
			padding-inline: 0px;
		}
	}

	.custom-form {
		margin-bottom: 0px;
		max-width: 100%;
	}

	.form-bottom-text {
		max-width: 520px;
		margin-inline: auto;
	}
}

.comp-ty-header {
	padding-bottom: 24px;
	overflow: hidden;

	@media (min-width: 768px) {
		padding-bottom: 40px;
	}

	&.advanced {
		h1 {
			margin-bottom: 13px;
			font-size: 2rem;
		}

		p {
			margin-bottom: 13px;
			font-size: 1.125rem;
		}

		.video-wrapper {
			margin-bottom: 20px;

			@media (min-width: 768px) {
				margin-top: 26px;
			}
		}
	}
}

.comp-ty-content {
	padding-top: 50px;

	.border-box {
		margin-bottom: 50px;
		padding: 1px;
		border-radius: 10px;
		background: linear-gradient(180deg, #f3981f 0%, #994a00 100%);
	}

	.border-box-inner {
		padding: 20px 30px 25px;
		border-radius: 10px;
		background: linear-gradient(180deg, #fff 0%, #fcf1e9 100%);

		@media (min-width: 768px) {
			padding: 25px 55px 30px;
		}
	}

	h2 {
		margin: 0 0 30px;
		font-weight: 700;
		font-size: 2rem;
		line-height: 1.2;
		color: #191817;

		&.mb-15 {
			margin-bottom: 15px;
		}

		&.mb-22 {
			margin-bottom: 22px;
		}

		&.mb-25 {
			margin-bottom: 25px;
		}

		&.mb-32 {
			margin-bottom: 32px;
		}

		&.mb-48 {
			margin-bottom: 48px;
		}
		
		.grey-subtitle {
			display: block;
			font-weight: 600;
			font-size: 1.25rem;
			line-height: 1.8;
			color: #747373;
		}
	}

	p {
		margin: 0 0 20px;
		font-weight: 500;
		font-size: 1.25rem;
		line-height: 1.3;
		color: #191817;

		&.medium-text {
			font-size: 1.125em;
		}

		&.fw-400 {
			font-weight: 400;
		}

		&.mb-27 {
			margin-bottom: 27px;
		}

		&.mb-30 {
			margin-bottom: 30px;
		}

		&.mb-32 {
			margin-bottom: 32px;
		}

		&.mb-50 {
			margin-bottom: 50px;
		}

		&.mb-67 {
			margin-bottom: 67px;
		}

		&.with-icon {
			display: flex;
			align-items: start;
			gap: 12px;
			line-height: 1.2;

			&:last-child {
				margin-bottom: 0;
			}

			img {
				flex-shrink: 0;
				width: 25px;
			}

			span {
				display: inline-block;
			}

			.with-bg {
				padding: 2px 8px;
				border-radius: 10px;
				background: #ffeacc;
			}
		}
	}

	.price-box {
		position: relative;
		padding: 1px;
		background: linear-gradient(to bottom right, #f3981f 40%, #747474 65%, #fff 100%);
		border-radius: 10px;
		margin-bottom: 50px;
		width: min(calc(100% - 10px), 1200px);
		margin-inline: auto;
	}

	.price-header {
		padding: 14px 20px;
		width: 100%;
		max-width: 274px;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, -40px);
		z-index: 5;
		border-radius: 6px;
		background: #1b1514;
		border: 1px solid #f3981f;
		box-shadow: 0px 2px 21.2px 0px #f3981f63;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;

		img {
			flex-shrink: 0;
			width: 32px;
		}

		p {
			margin: 0;
			font-weight: 500;
			font-size: 1rem;
			color: #e3e0e0;

			.orange-text {
				color: #f3981f;
				margin-bottom: 4px;
				font-weight: 400;
			}
		}
	}

	.price-box-inner {
		padding: 40px 15px 50px;
		border-radius: 10px;
		background: linear-gradient(180deg, #141213 0%, #492b18 100%);

		@media (min-width: 768px) {
			padding-inline: 30px;
		}

		.price-row-title {
			padding-block: 20px;
			border-bottom: 1px solid #3a3432;
			display: flex;
			align-items: center;
			justify-content: space-around;
			gap: 10px;

			p {
				font-weight: 500;
				line-height: 1.2;
			}
		}

		.price-row {
			padding-block: 16px 15px;
			border-bottom: 1px solid #3a3432;
			display: flex;
			align-items: center;
			justify-content: space-around;
			gap: 10px;
		}

		p {
			margin: 0;
			font-weight: 600;
			font-size: 1.25rem;
			line-height: 1;
			color: #e3e0e0;
			text-align: center;

			&.orange-text {
				color: #f39720;
			}

			&.grey-text {
				padding-inline: 7px;
				position: relative;
				color: #6b6b6b;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					width: 100%;
					height: 1px;
					background: #f39720;
					transform: rotate(-22deg);
					z-index: 5;
				}
			}

			&.code-wrapper {
				margin-block: 30px 20px;
				font-weight: 500;
				line-height: 1.5;

				.use-code {
					margin-top: 5px;
					display: block;
					font-size: 1.875rem;
					color: #ffa42f;
				}
			}
		}

		.comp-btn-orange {
			margin-bottom: 0;
			text-transform: none;
			max-width: 380px;
			margin-inline: auto;
		}
	}

	.accordion {
		.accordion-item {
			margin-bottom: 12px;
			border: 1px solid #bfbec2;
			border-radius: 10px;
			overflow: hidden;

			&:has(.accordion-collapse.show) {
				border-color: #f3981f;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		.accordion-header {
			margin: 0;
		}

		.accordion-button {
			padding: 10px 20px;
			background: transparent;
			font-weight: 500;
			font-size: 1.25rem;
			line-height: 1.2;
			color: #191817;
			display: flex;
			align-items: start;
			justify-content: space-between;
			gap: 30px;
			box-shadow: none;

			&:not(.collapsed) {
				background: transparent;
				color: #191817;
				box-shadow: none;

				.arrow-icon {
					transform: rotate(-180deg);
				}
			}

			&::after {
				display: none;
			}

			.arrow-icon {
				margin-top: 6px;
				display: block;
				flex-shrink: 0;
				width: 15px;
				transition: all 0.3s linear;
			}
		}
		
		.collapse:not(.show) {
			display: none!important;
		}

		.accordion-body {
			padding: 8px 20px 10px;

			p {
				margin: 0;
				font-weight: 300;
				font-size: 1.125rem;
			}
		}
	}

	.purchase-notification {
		padding: 8px 20px 8px 15px;
		background: #492b18;
		border-radius: 10px;
		width: 80%;
		max-width: 350px;
		margin-inline: auto;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		opacity: 0;
		transition: all 0.25s ease-in;
		pointer-events: none;

		&.shown {
			opacity: 1;
		}

		p {
			margin: 0;
			font-weight: 300;
			font-size: 1rem;
			line-height: 1.3;
			color: #fff;
			text-align: center;

			b {
				font-weight: 400;
			}

			.username {
				font-weight: 500;
			}

			.orange-text {
				font-weight: 700;
				color: #f39720;
			}
		}
	}
	
	.nav-tabs {
		margin-bottom: 20px;
		display: flex;
		border: none;
		gap: 10px;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-block: 20px 15px;

		@media only screen and (min-width: 768px) {
			justify-content: center;
			padding-block: 30px 25px;
		}

		li {
			flex-shrink: 0;
		}
	}

	.nav-link {
		padding: 14px 18px;
		font-weight: bold;
		color: #f3981f;
		font-size: 16px;
		line-height: 19px;
		border-radius: 12px!important;
		cursor: pointer;
		background: transparent;
		border: 1px solid transparent;

		&:hover {
			border-color: #f3981f!important;
			color: #f3981f!important;
		}

		&.active {
			background: linear-gradient(90deg, #201b1a, #242424)!important;
			border: 1px solid #f3981f!important;
			color: #f3981f!important;
			box-shadow: 0px 2px 12px 0px rgba(243, 152, 31, 0.39);

			@media only screen and (min-width: 768px) {
				box-shadow: 0px 2px 21px 0px rgba(243, 152, 31, 0.39);
			}
		}

		span {
			color: #e3e0e0;
			font-weight: 300;
			display: block;
		}
	}

	.table-responsive {
		padding-bottom: 20px;
		margin-bottom: 30px;

		table {
			width: 100%;
			table-layout: fixed;

			th {
				padding: 16px;
				color: #8b827c;
				font-weight: 400;
				font-size: 12px;
				line-height: 22px;
				text-align: center;
				border-bottom: 1px solid rgba(116, 116, 116, 0.2);
				width: 140px;

				@media only screen and (min-width: 768px) {
					font-size: 18px;
					width: auto;
				}

				&:first-child {
					position: sticky;
					left: 0;
					width: 115px;
					padding-left: 8px;
					/* background: #161514; */
					z-index: 2;

					@media only screen and (min-width: 768px) {
						width: 220px;
					}

					@media only screen and (min-width: 992px) {
						width: 300px;
					}
				}
			}

			td {
				padding: 16px;
				font-size: 12px;
				line-height: 22px;
				color: #e3e0e0;
				text-align: center;
				border-bottom: 1px solid rgba(116, 116, 116, 0.2);

				/* background: #161514; */

				@media only screen and (min-width: 768px) {
					font-size: 18px;
				}

				&:first-child {
					position: sticky;
					left: 0;
					padding-inline: 7px;
					background: #242424;
					z-index: 2;
					border-right: 1px solid rgba(116, 116, 116, 0.2);
					font-weight: 600;
					text-align: left;
					padding-right: 35px;

					@media only screen and (min-width: 768px) {
						background: transparent;
						border-right: none;
						padding-right: 40px;
					}

					@media only screen and (min-width: 992px) {
						padding-right: 60px;
						display: flex;
						justify-content: space-between;
						align-items: start;
						gap: 10px;
					}
				}

				span {
					color: #8b827c;
				}
			}

			.tip-holder {
				flex-shrink: 0;
				margin-top: 4px;
				position: absolute;
				top: 16px;
				right: 10px;

				@media only screen and (min-width: 768px) {
					margin-top: 2px;
				}

				@media only screen and (min-width: 992px) {
					position: relative;
					top: 0;
					right: 0;
				}

				.tip-info {
					position: relative;
					display: block;
					border-radius: 50%;
					width: 16px;
					height: 16px;
					background: gray url(/wp-content/uploads/2025/02/info.svg) center center no-repeat;
					opacity: 0.4;
					cursor: pointer;
					transition: all 0.2s ease-in;

					&:hover {
						opacity: 1;

						.tooltip-text {
							visibility: visible;
						}
					}
				}

				.tooltip-text {
					position: absolute;
					top: -12px;
					right: -228px;
					visibility: hidden;
					width: 220px;
					color: #e3e0e0;
					border: 1px solid rgba(116, 116, 116, 0.2);
					border-radius: 8px;
					padding: 7px 12px;
					background: #242424;
					text-align: center;
					font-size: 14px;
					line-height: 17px;
					z-index: 10;
				}
			}
		}
	}

	.price-holder {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;

		p {
			margin: 0;
			font-size: 20px;
			line-height: 24px;
			color: #8b827c;
		}

		.price {
			display: flex;
			align-items: center;
			gap: 15px;

			.prev-price {
				padding-inline: 7px;
				position: relative;
				color: #6b6b6b;
				font-size: 26px;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					width: 100%;
					height: 1px;
					background: #f39720;
					transform: rotate(-22deg);
					z-index: 5;
				}
			}

			.current-price {
				color: #f39720;
				font-size: 32px;
			}
		}
	}

	&.advanced {
		.border-box-inner {
			padding-inline: 20px;

			@media (min-width: 768px) {
				padding-inline: 40px;
			}

			h2 {
				margin-bottom: 15px;
			}

			p {
				font-weight: 400;

				&.with-icon {
					gap: 11px;
				}

				b {
					font-weight: 500;
				}
			}
		}

		h2 {
			.grey-subtitle {
				display: block;
				font-weight: 600;
				font-size: 1.25rem;
				line-height: 1.8;
				color: #747373;
			}
		}

		.perks-box {
			margin-bottom: 60px;
			border: 1px solid #ffe7c8;
			background: #fffaf3;
			border-radius: 10px;
			padding: 20px 20px 30px;

			@media (min-width: 768px) {
				padding: 30px 30px 40px;
			}

			p.with-icon {
				line-height: 1.3;
				gap: 8px;

				img {
					width: 27px;
				}
			}
		}

		.btn-green {
			margin-bottom: 0;
			text-transform: none;
			background: linear-gradient(92.95deg, #007a63 0%, #006b57 100%);
			box-shadow: 0px 2px 21.2px 0px #007a6363;
		}

		.spots-box {
			border-radius: 10px;
			padding: 1px;
			background: linear-gradient(
				322.21deg,
				rgba(255, 255, 255, 0.2) 0%,
				rgba(116, 116, 116, 0.2) 51.5%,
				#f3981f 100%
			);
		}

		.spots-box-inner {
			border-radius: 10px;
			background: linear-gradient(180deg, #141213 0%, #492b18 100%);
			padding: 40px 20px 48px;

			h2 {
				color: #fff;
			}

			p {
				margin: 0 0 30px;
				color: #fff;

				&.orange-text {
					color: #ffa42f;
				}
			}

			h3 {
				margin: 0 0 35px;
				font-weight: 500;
				font-size: 4.375rem;
				line-height: 1;
				text-align: center;
				color: #ffa42f;
			}

			.btn-green {
				text-wrap: pretty;
			}
		}
	}
}

.comp-sp-header {
	position: relative;
	overflow: hidden;
	background: #090b06;
	padding-bottom: 30px;

	@media only screen and (min-width: 768px) {
		padding-bottom: 40px;
	}

	.comp-sec-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		background: #090b06;
		transform: translateY(-100%);
		transition: all 0.3s ease-in;

		&.show {
			transform: translateY(0%);
		}

		.comp-sec-menu-inner {
			padding-block: 15px 10px;
			width: min(calc(100% - 28px), 1100px);
			margin-inline: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.sec-logo {
			margin: 0;
			flex-shrink: 0;
			max-width: 46px;

			@media only screen and (min-width: 768px) {
				max-width: 85px;
			}
		}

		.btn-claim {
			flex-shrink: 0;
			padding: 11px 18px;
			border-radius: 10px;
			background: #2f2215;
			border: 1px solid #343332;
			box-shadow: 0px 2px 21.2px 0px #f3981f63;
			font-weight: 500;
			font-size: 1rem;
			line-height: 1;
			color: #ffaf45;
			text-decoration: none;
		}
	}

	h1 {
		margin-bottom: 0;

		@media only screen and (min-width: 768px) {
			margin-top: -15px;
			font-size: 3.3rem;
		}
	}

	.subtitle {
		margin-bottom: 0;
		font-weight: 300;
		color: #b4b4b4;

		.white-text {
			font-weight: 500;
			color: #fff;
		}
	}

	.banner-image {
		display: block;
		width: 100%;
		max-width: 646px;
		margin-inline: auto;
	}

	.timer-wrapper {
		margin-block: -45px 11px;

		@media only screen and (min-width: 768px) {
			margin-top: -55px;
		}

		.timer-title {
			margin: 0 0 7px;
			font-weight: 500;
			font-size: 1rem;
			line-height: 1.2;
			color: #ffaf45;
			text-align: center;
		}

		.timer {
			display: flex;
			justify-content: center;
			gap: 8px;
		}

		.time-container {
			flex-shrink: 0;
			width: 72px;
			padding: 7px 8px;
			border: 0.5px solid #e57625;
			border-radius: 6px;
		}

		.timer-text {
			margin: 0;
			font-weight: 700;
			font-size: 2.875rem;
			line-height: 1;
			color: #ffaf45;
			text-align: center;

			.small-text {
				display: block;
				font-weight: 600;
				font-size: 0.667rem;
				line-height: 1.2;
				color: #e57625;
			}
		}
	}

	.comp-btn-orange {
		padding-block: 18px;
		margin-block: 0 60px;
		font-size: 1.5rem;
		text-transform: none;
		margin-top: 0;
		max-width: calc(100% - 30px);

		@media only screen and (min-width: 768px) {
			max-width: 450px;
		}

		&.btn-black {
			margin-bottom: 0;
			background: linear-gradient(to right, #24221d, #090b06);
			box-shadow: 0px 2px 21.2px 0px #f3981f63;
			max-width: 100%;
		}
	}

	.why-pro-outer {
		padding: 1px;
		border-radius: 10px;
		background: linear-gradient(to bottom, #f3981f, #994a00);

		.why-pro-inner {
			border-radius: 10px;
			padding: 40px 14px 60px;
			background: linear-gradient(to bottom, #0a0b06, #e37524);

			@media only screen and (min-width: 768px) {
				padding-inline: 30px;
			}
		}

		h2 {
			margin: 0 0 30px;
			font-weight: 700;
			font-size: 2rem;
			line-height: 1.2;
			color: #ffaf45;
			text-align: center;

			@media only screen and (min-width: 768px) {
				font-size: 3rem;
			}
		}

		p {
			margin: 0 0 14px;
			font-weight: 300;
			font-size: 1.125rem;
			line-height: 1.3;
			color: #fff;
			text-align: left;
			display: flex;
			align-items: start;
			gap: 10px;

			&:last-of-type {
				margin-bottom: 30px;
			}

			img {
				flex-shrink: 0;
				width: 25px;
			}

			b {
				font-weight: 500;
				font-size: 1.25rem;
			}

			a {
				text-decoration: underline;
				font-weight: 300;
				color: #ffaf45;

				&:hover,
				&:focus-visible {
					color: #ffaf45;
					text-decoration: underline;
				}
			}
		}
	}
}

.comp-sp-content {
	padding-top: 60px;

	.orange-text {
		margin: 0 0 6px;
		font-weight: 700;
		font-size: 1.375rem;
		line-height: 1.2;
		color: #f3981f;
		text-align: center;
	}

	.bigger-h2-title {
		font-size: 3.375rem;

		.promo-code {
			font-size: 3.4rem;
		}
	}

	h2 {
		&.mb-10 {
			margin-bottom: 10px;
		}
	}

	p {
		&.mb-95 {
			margin-bottom: 95px;
		}

		&.lh-14 {
			line-height: 1.4;
		}

		&.fz-22 {
			font-size: 1.375rem;
		}

		&.with-tick-icon {
			margin: 0 0 14px;
			font-weight: 300;
			display: flex;
			align-items: start;
			gap: 10px;

			img {
				flex-shrink: 0;
				display: block;
				width: 25px;
			}

			b {
				font-weight: 500;
			}

			&:last-of-type {
				margin-bottom: 60px;
			}
		}

		.orange-bg {
			padding: 3px 10px;
			border-radius: 10px;
			background: #f3981f;
			font-weight: 800;
		}

		&.step-title {
			margin-bottom: 10px;
			margin-inline: auto;
			display: block;
			width: fit-content;
			padding: 8px 20px;
			border-radius: 6px;
			background: linear-gradient(to right, #f3981f, #e57625);
			font-weight: 700;
			line-height: 1.2;
			font-size: 1rem;
			color: #fff;
			text-transform: uppercase;
		}

		&.step-text {
			margin: 0 0 30px;
			font-weight: 300;
			font-size: 1.25rem;
			line-height: 1.3;
			text-align: center;

			b {
				font-weight: 500;
			}
		}
	}

	.price-box {
		width: min(calc(100% - 10px), 1100px);
	}

	.price-box-inner {
		.comp-btn-orange {
			max-width: calc(100% - 16px);

			@media only screen and (min-width: 768px) {
				max-width: 450px;
			}
		}
	}

	.comp-btn-orange {
		padding-block: 18px;
		text-transform: none;
		margin-block: 0;
		max-width: calc(100% - 30px);

		@media only screen and (min-width: 768px) {
			max-width: 450px;
		}
	}

	.act-fast-wrapper {
		margin-block: 60px;
		padding: 40px 15px 60px;
		background: linear-gradient(to bottom, #151313, #492b18);
		border-radius: 10px;

		@media only screen and (min-width: 768px) {
			padding-inline: 30px;
		}

		h3 {
			margin: 0 0 30px;
			font-weight: 700;
			font-size: 2rem;
			line-height: 1.2;
			color: #fff;
			text-align: center;
		}

		p {
			margin: 0 0 30px;
			font-weight: 400;
			font-size: 1.125rem;
			line-height: 1.2;
			color: #fff;
			text-align: center;

			&.orange-text {
				margin-bottom: 16px;
				font-weight: 500;
				font-size: 1.25rem;
				color: #ffa42f;
			}
		}

		.timer-wrapper {
			display: flex;
			justify-content: center;
			gap: 12px;
			margin-bottom: 23px;

			.time-container {
				flex-shrink: 0;
				padding: 7px 8px;
				width: 72px;
				background: linear-gradient(to right, #f3981f, #e57625);
				border-radius: 6px;
			}

			.timer-text {
				margin: 0;
				font-weight: 700;
				font-size: 2.875rem;
				line-height: 1;
				color: #fff;
				text-align: center;

				.small-text {
					display: block;
					font-weight: 600;
					font-size: 0.75rem;
					line-height: 1.2;
					color: #281b15;
				}
			}
		}

		.comp-btn-orange {
			max-width: 100%;

			@media only screen and (min-width: 768px) {
				max-width: 450px;
			}
		}
	}
}

.comp-heat-header {
	.top-title {
		margin: 0 0 4px;
		font-weight: 300;

		.white-text {
			color: #fff;
		}
	}

	.subtitle {
		margin-bottom: 14px;

		.white-text {
			font-weight: 300;
		}
	}

	.orange-text {
		color: #ffaf45;
	}

	h1 {
		margin-block: 0 4px;
	}

	.btn-wrapper {
		position: relative;
		margin-block: -45px 60px;
		z-index: 5;

		.comp-btn-orange {
			margin-block: 0;
		}
	}
}

.comp-heat-content {
	.bigger-h2-title {
		line-height: 1;
	}

	.promo-text {
		margin-bottom: 80px;
		font-weight: 300;

		.regular-text {
			font-weight: 400;
		}

		.bold-text {
			font-weight: 800;
		}
	}

	.bonus-title {
		margin-bottom: 10px;

		.promo-code {
			color: #f3981f;
		}
	}

	.act-fast-wrapper {
		p {
			font-weight: 300;
		}
	}

	.end-text {
		margin-block: 30px 0;
		font-weight: 500;
		text-align: center;
	}

	.price-header {
		max-width: 285px;
	}

	.line {
		width: 100%;
		max-width: 164px;
		height: 1px;
		margin: 0 auto 60px;
		background: #141213;
	}
}