/* =========================================================
   Shared "Plan Card" pricing component.

   Used by business_solutions.php, development.php, gaming.php,
   and fx_trading.php - loaded via <link> after each page's own
   <page>.css.

   Selectors are written without a page-specific section prefix
   (plain ".plan-card" rather than ".trading-plans .plan-card")
   since each page has exactly one plans section - no prefix was
   ever needed to disambiguate, and using one was the source of a
   real bug: fx_trading.css's mobile rule referenced
   ".business-plans .plan-card", which never matched anything on
   that page (its section is actually "trading-plans"), silently
   breaking the mobile stacked layout for that page only.

   A few values that had drifted slightly between the 4 source
   files have been standardized here to the majority value used by
   3 of the 4 pages:
   - .plan-card margin-bottom: 40px (development.css was 60px)
   - .plan-price background: #eef5fd (development.css used
     var(--blue-light), a visibly different pale blue - #eaf0ff)
   - .plan-left h3 font-size/padding: 16px / 10px (development.css
     used 8px padding; fx_trading.css used 14px font-size)
   - .plan-title h2 margin: 0 (fx_trading.css was missing this,
     leaving default browser heading margin around every plan title)
   - .introduction_left p font-size: 18px (gaming.css used 1.6rem,
     which resolves to 16px under this site's 62.5% root font-size)
========================================================= */

/* ---------- Page introduction ---------- */

.introduction-wrapper {
	border-bottom: 1px solid var(--blue);
}

.introduction {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 0;
	flex-wrap: wrap;

	@media (max-width: 768px) {
		flex-direction: column;
		align-items: flex-start;
		padding: 40px 20px;
	}
}

.introduction_left {
	flex: 1 1 46%;
	padding-right: 100px;

	& h2 {
		margin-top: 60px;
		color: var(--navy);
		font-size: 3.2rem;
		line-height: 1.25;
		margin-bottom: 60px;
		animation: fadeUp 0.8s ease forwards;
	}

	& p {
		font-weight: 400;
		color: var(--navy-dark);
		font-size: 18px;
		line-height: 1.6;
		margin-bottom: 60px;
		animation: fadeUp 0.8s ease forwards;
	}
}

.intro-buttons {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 60px;
	animation: fadeUp 0.8s ease forwards;
}

.introduction_right {
	position: relative;
	flex: 1 1 46%;
	max-width: 400px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-left: 60px;

	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: -40px;
		bottom: -40px;
		width: 1px;
		background: var(--blue);
	}

	& > div {
		display: flex;
		align-items: center;
		gap: 14px;
	}

	& img {
		width: 34px;
		height: 34px;
		flex-shrink: 0;
		animation: fadeUp 0.8s ease forwards;
	}

	& p {
		color: var(--navy-dark);
		font-size: 2.2rem;
		font-weight: 300;
		animation: fadeUp 0.8s ease forwards;
	}

	@media (max-width: 768px) {
		border-left: none;
		padding-left: 80px;
		padding-top: 24px;
		border-top: 1px solid var(--border);
		width: 100%;
	}
}

/* ---------- Plans section wrapper (same values, different class name per page) ---------- */

.business-plans,
.trading-plans,
.dmm-plans {
	text-align: center;
	padding: 72px 24px;
}

.business-title,
.trading-title,
.dmm-title {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto 50px;

	& p {
		margin-top: 10px;
		font-size: 16px;
		color: var(--navy-dark);
		font-weight: 300;
	}
}

/* ---------- Plan title ---------- */

.plan-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;

	& h2 {
		font-size: 2.5rem;
		color: var(--navy);
		padding-bottom: 20px;
		margin: 0;

		@media (max-width: 480px) {
			font-size: 18px;
		}
	}
}

/* ---------- Left sidebar: icon above plan name ---------- */

.plan-left {
	position: relative;
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 8px 4px;

	&::after {
		content: "";
		position: absolute;
		top: 40px;
		bottom: 30px;
		right: 0;
		width: 0;
		border-right: 1px solid var(--blue);

		@media (max-width: 768px) {
			display: none;
		}
	}

	& img {
		width: 40px;
		height: 40px;
		flex-shrink: 0;

		@media (max-width: 768px) {
			width: 44px;
			height: 44px;
		}
	}

	& h3 {
		text-align: center;
		font-weight: 500;
		color: var(--navy);
		font-size: 16px;
		line-height: 1.3;
		margin: 0;
		padding: 10px;

		@media (max-width: 768px) {
			text-align: left;
			font-size: 15px;
		}
	}

	@media (max-width: 768px) {
		flex-direction: row;
		justify-content: flex-start;
		padding: 16px 20px;
		gap: 14px;
	}
}

/* ---------- Right side: description on top, specs below ---------- */

.plan-right {
	text-align: left;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.plan-intro {
	position: relative;
	padding: 20px 32px 8px;

	& strong {
		color: var(--navy-dark);
		margin-right: 4px;
	}

	& p {
		color: var(--navy-dark);
		font-size: 14px;
		font-weight: 400;
		line-height: 1.5;
		margin: 0;

		@media (max-width: 768px) {
			font-size: 13px;
		}
	}

	&::after {
		@media (max-width: 768px) {
			left: 20px;
			right: 20px;
		}
	}

	@media (max-width: 768px) {
		padding: 12px 20px 8px;
	}
}

.plan-specs-row {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 8px 32px 16px;
	width: 100%;
	box-sizing: border-box;

	@media (max-width: 1024px) {
		flex-wrap: wrap;
		row-gap: 16px;
	}

	@media (max-width: 768px) {
		padding: 8px 20px 20px;
		gap: 16px;
	}
}

.spec-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
}

/* ---------- Spec columns ---------- */

.plan-name {
	flex: 0 0 220px;
	text-align: left;

	& h3 {
		font-weight: 700;
		color: var(--navy);
		font-size: 17px;
		line-height: 1.3;
		margin: 0;
	}
}

/* .plan-spec and .vpn share almost everything, but ".plan-spec span"
   (no :not() filter) and ".vpn span:not(.tick):not(.cross)" are not
   quite symmetric selectors, so that one rule is kept flat below
   rather than merged into the nested block, to avoid any risk of
   changing what it matches. */
.plan-spec,
.vpn {
	text-align: center;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	border-left: 1px solid var(--blue);
	padding-left: 16px;

	& small {
		padding-bottom: 8px;
		font-size: 12px;
		color: var(--blue);
		font-weight: 400;
	}

	@media (max-width: 1024px) {
		flex: 1 1 100px;
		min-width: 90px;
	}

	@media (max-width: 480px) {
		flex: 1 1 45%;
		min-width: 0;
	}
}

.plan-specs-row > .plan-spec:first-child {
	border-left: none;
	padding-left: 0;
}

.plan-spec span,
.vpn span:not(.tick):not(.cross) {
	font-size: 14px;
	font-weight: 300;
	color: var(--text-muted);
}

.plan-spec {
	& .plan span {
		font-size: 1.6rem;
		color: var(--navy-dark);
		font-weight: 400;
	}

	& strong {
		font-size: 16px;
		color: var(--navy-dark);
		font-weight: 600;
	}

	&:first-child {
		border-left: none;
		padding-left: 0;
	}

	@media (max-width: 480px) {
		&:nth-child(odd) {
			border-left: none;
			padding-left: 0;
		}
	}
}

/* ---------- VPN icons ---------- */

.tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #19cf5c;
	color: white;
	font-size: 13px;
	font-weight: 700;
	margin: 0 auto;

	&::before {
		content: "✓";
		color: white;
		font-size: 15px;
		font-weight: 700;
	}
}

.cross {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #e74117;
	color: white;
	font-size: 13px;
	font-weight: 800;
	margin: 0 auto;

	&::before {
		content: "✕";
		color: white;
		font-size: 15px;
		font-weight: 800;
	}
}

/* ---------- Cards container ---------- */

.plans-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto 32px;
	padding: 0 40px;
	box-sizing: border-box;
	scroll-margin-top: var(--header-height);

	@media (min-width: 1280px) {
		padding: 0 48px;
	}

	@media (min-width: 1600px) {
		padding: 0 80px;
	}
}

/* ---------- Card ---------- */

.plan-card {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding: 0;
	text-align: left;
	margin-bottom: 40px;
	border: 1px solid var(--blue);
	border-radius: var(--radius);
	box-shadow: 0 4px 4px rgba(0,0,0,.356);
	z-index: 1;
	overflow: visible;
	width: 100%;
	box-sizing: border-box;

	&:hover {
		transform: translateY(-6px);
		box-shadow: 0 14px 28px rgba(0,0,0,.22);
	}

	&:has(.custom-select.active) {
		z-index: 20;
	}

	&:last-of-type {
		margin-bottom: 0;
	}

	@media (max-width: 768px) {
		flex-direction: column;
	}
}

/* ---------- Price box ---------- */

.plan-price {
	position: relative;
	flex: 0 0 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	white-space: nowrap;
	background: #eef5fd;
	border-radius: 14px;
	padding: 14px;
	margin-left: 20px;

	&::before {
		content: "";
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: -16px;
		width: 0;
		border-right: 1px solid var(--blue);

		@media (max-width: 1024px) {
			display: none;
		}
	}

	/* Scoped override: dropdown inside the price box only */
	& .custom-select {
		width: auto;
		flex: 0 0 auto;
	}

	& .selected-option {
		background: none;
		padding: 0;
		margin: 0;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
	}

	@media (max-width: 1024px) {
		flex: 1 1 140px;
		margin-left: 0;
		margin-top: 16px;
		order: 10;
	}

	@media (max-width: 768px) {
		flex: 1 1 100%;
		margin-left: 0;
		margin-top: 12px;
	}
}

.billing-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 6px;
	margin-bottom: 8px;

	& small {
		padding-bottom: 0;
		font-size: 12px;
		color: var(--blue);
		font-weight: 400;
	}
}

.price-display {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;

	& strong {
		font-size: 16px;
		color: var(--navy-dark);
		font-weight: 600;
	}

	& span {
		font-size: 13px;
		color: var(--blue);
		font-weight: 500;
	}
}

/* ---------- Custom dropdown ---------- */

.custom-select {
	position: relative;
	width: 120px;
	flex: 0 0 120px;
}

.selected-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: white;
	color: var(--blue);
	padding: 8px 15px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	font-size: 14px;

	&::after {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid var(--blue);
		transition: transform 0.2s ease;
	}
}

.custom-select.active .selected-option::after {
	transform: rotate(180deg);
}

.dropdown-options {
	display: none;
	position: absolute;
	right: 0;
	width: 120px;
	background: var(--blue);
	color: white;
	border-radius: 12px;
	z-index: 9999;
}

.custom-select {
	&.active .dropdown-options {
		display: block;
	}

	&.drop-up .dropdown-options {
		bottom: calc(100% + 5px);
		top: auto;
	}

	&.drop-down .dropdown-options {
		top: calc(100% + 5px);
		bottom: auto;
	}
}

.dropdown-option {
	padding: 10px 15px;
	cursor: pointer;
	white-space: nowrap;

	&:hover {
		background: white;
		color: var(--blue);
	}
}

/* ---------- Order now button ---------- */

.plan-action {
	margin-left: auto;

	@media (max-width: 1024px) {
		margin-left: 0;
		margin-top: 16px;
		width: 100%;
		order: 11;
	}

	@media (max-width: 768px) {
		flex: 1 1 100%;
	}
}

.btn.btn-primary {
	display: inline-block;
	white-space: nowrap;

	@media (max-width: 1024px) {
		width: 100%;
		text-align: center;
	}
}

/* ---------- Footer note ---------- */

.plans-footer {
	display: flex;
	justify-content: center;
	width: 100%;
	text-align: center;
}

.plans-footer-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.plans-footer-message {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 15px;

	& img {
		width: 20px;
		height: auto;
		margin-top: 5px;
	}

	& h3 {
		margin: 0;
		font-size: 16px;
		font-weight: 300;
		line-height: 1.6;
		color: var(--navy-dark);
	}
}

.plans-footer-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 25px;
	margin-bottom: 60px;
	width: 100%;
}