/* ============================================================
   RocketX — Account Type Comparison Table
   Toggled by the "Compare all" button inside the account
   types widget. Replaces the single-card view with a full
   horizontal compare table, glassmorphism-styled.
   ============================================================ */

/* ── Step 2 header: label on the left, compare toggle on the right ── */
.rx-acct-step__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
}
/* Label already had its own bottom margin — zero it inside the head row */
.rx-acct-step__head .rx-acct-step__label {
	margin-bottom: 0;
}

/* ── Toggle button ──────────────────────────────────────────── */
/* Reset Elementor kit button overrides (all:unset WITHOUT !important),
   then re-assert every visual prop with !important so the kit's
   `.elementor-kit-N button` rule — which loads later — can't win. */
.rx-acct-compare-toggle,
.rx-acct-compare-toggle:hover,
.rx-acct-compare-toggle:focus,
.rx-acct-compare-toggle:active {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
}
.rx-acct-compare-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 8px 20px 8px 16px !important;
	border-radius: 40px !important;
	background: rgba(220, 79, 44, 0.14) !important;
	border: 1px solid rgba(220, 79, 44, 0.50) !important;
	color: var(--rx-orange-300, #F08566) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	transition: background 200ms, border-color 200ms, color 200ms, box-shadow 200ms !important;
}
.rx-acct-compare-toggle:hover {
	background: rgba(220, 79, 44, 0.24) !important;
	border-color: rgba(220, 79, 44, 0.70) !important;
	color: #fff !important;
	box-shadow: 0 0 22px -4px rgba(220, 79, 44, 0.55) !important;
}
.rx-acct-compare-toggle svg {
	flex-shrink: 0 !important;
	transition: transform 300ms ease !important;
}
.rx-acct-compare-toggle.is-active {
	background: rgba(220, 79, 44, 0.10) !important;
	border-color: rgba(220, 79, 44, 0.30) !important;
	color: rgba(220, 79, 44, 0.90) !important;
}

/* ── Attention pulse ────────────────────────────────────────────
   While compare mode is OFF, the toggle gently breathes an expanding
   glow ring so the eye is drawn to "Compare all". It quiets on hover
   (the hover glow takes over) and stops once compare mode is active.
   Author !important on :hover outranks the animation, so the hover
   state cleanly overrides the pulsing box-shadow. */
@keyframes rxComparePulse {
	0% {
		box-shadow: 0 0 0 0 rgba(220, 79, 44, 0.45),
		            0 0 14px -2px rgba(220, 79, 44, 0.30);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(220, 79, 44, 0),
		            0 0 20px -2px rgba(220, 79, 44, 0.10);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(220, 79, 44, 0),
		            0 0 14px -2px rgba(220, 79, 44, 0.30);
	}
}

.rx-acct-compare-toggle:not(.is-active) {
	animation: rxComparePulse 2.4s ease-out infinite;
}

/* A small live dot inside the pill reinforces the "look here" cue */
.rx-acct-compare-toggle:not(.is-active) .rx-acct-compare-toggle__label::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-radius: 50%;
	background: var(--rx-orange-300, #F08566);
	vertical-align: middle;
	animation: rxCompareDot 2.4s ease-in-out infinite;
}

@keyframes rxCompareDot {
	0%, 100% { opacity: 0.35; transform: scale(0.8); }
	50%      { opacity: 1;    transform: scale(1.15); }
}

/* Hover: let the hover glow win, hold the pulse and dot still */
.rx-acct-compare-toggle:hover {
	animation-play-state: paused !important;
}
.rx-acct-compare-toggle:hover .rx-acct-compare-toggle__label::after {
	animation-play-state: paused !important;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.rx-acct-compare-toggle,
	.rx-acct-compare-toggle .rx-acct-compare-toggle__label::after {
		animation: none !important;
	}
	.rx-acct-compare-toggle:not(.is-active) .rx-acct-compare-toggle__label::after {
		opacity: 0.9;
	}
}

/* ── Tab line: account-type tabs + compare toggle on one row ── */
.rx-acct-type-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
}
.rx-acct-type-row .rx-acct-type-tabs {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
}
.rx-acct-type-row .rx-acct-compare-toggle {
	flex-shrink: 0;
	margin-left: auto;
}
.rx-acct-section.is-compare-mode .rx-acct-type-row { margin-bottom: 1.25rem; }

/* ── Section view switching ─────────────────────────────────── */
/* Default: compare table hidden */
.rx-acct-section .rx-acct-compare { display: none; }

/* Compare mode: hide only the type tabs + card panels (keep the step-2
   head row so the toggle stays anchored), show the comparison table. */
.rx-acct-section.is-compare-mode .rx-acct-type-tabs { display: none; }
.rx-acct-section.is-compare-mode .rx-acct-panels    { display: none; }
.rx-acct-section.is-compare-mode .rx-acct-compare   { display: block; }
/* Drop the head's bottom margin in compare mode — table provides spacing */
.rx-acct-section.is-compare-mode .rx-acct-step--type { margin-bottom: 0; }

/* ── Compare wrapper ────────────────────────────────────────── */
.rx-acct-compare {
	margin-top: 24px;
}

.rx-acct-compare__scroll {
	overflow-x: auto;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	-webkit-overflow-scrolling: touch;
	/* Coloured scrollbar */
	scrollbar-width: thin;
	scrollbar-color: rgba(220, 79, 44, 0.40) transparent;
}
.rx-acct-compare__scroll::-webkit-scrollbar        { height: 4px; }
.rx-acct-compare__scroll::-webkit-scrollbar-thumb  {
	background: rgba(220, 79, 44, 0.40);
	border-radius: 2px;
}
.rx-acct-compare__scroll::-webkit-scrollbar-track  { background: transparent; }

/* ── Table (flex column of rows) ────────────────────────────── */
.rx-acct-compare__table {
	display: flex;
	flex-direction: column;
	min-width: 780px; /* ensures readability before scroll kicks in */
}

/* ── Rows ───────────────────────────────────────────────────── */
.rx-acct-compare__row {
	display: flex;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.rx-acct-compare__row:last-child { border-bottom: none; }

/* Alternating row tint */
.rx-acct-compare__row:nth-child(odd):not(.rx-acct-compare__row--head):not(.rx-acct-compare__row--cta) .rx-acct-compare__cell:not(.rx-acct-compare__cell--label) {
	background: rgba(14, 20, 48, 0.65);
}

/* ── Cells ──────────────────────────────────────────────────── */
.rx-acct-compare__cell {
	flex: 1;
	min-width: 0;
	padding: 13px 14px;
	background: rgba(11, 16, 35, 0.70);
	border-right: 1px solid rgba(255, 255, 255, 0.04);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.80);
	display: flex;
	align-items: center;
	gap: 4px;
	line-height: 1.4;
}
.rx-acct-compare__cell:last-child { border-right: none; }

/* Label column (left) */
.rx-acct-compare__cell--label {
	flex: 0 0 112px;
	min-width: 112px;
	background: rgba(7, 11, 28, 0.82) !important;
	color: rgba(255, 255, 255, 0.38);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	padding: 13px 12px;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Header row ─────────────────────────────────────────────── */
.rx-acct-compare__row--head .rx-acct-compare__cell {
	background: rgba(18, 26, 60, 0.85);
	padding: 20px 14px 16px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 8px;
}
.rx-acct-compare__row--head .rx-acct-compare__cell--label {
	background: rgba(10, 14, 36, 0.90) !important;
	justify-content: center;
}

/* Featured / Popular column header */
.rx-acct-compare__cell--featured {
	background: rgba(220, 79, 44, 0.10) !important;
	border-top: 2px solid rgba(220, 79, 44, 0.55);
}
.rx-acct-compare__row--head .rx-acct-compare__cell--featured {
	background: rgba(220, 79, 44, 0.14) !important;
}

/* Account name in header */
.rx-acct-compare__acct-name {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.01em;
}

/* "Most Popular" badge */
.rx-acct-compare__popular {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #DC4F2C;
	background: rgba(220, 79, 44, 0.15);
	border: 1px solid rgba(220, 79, 44, 0.30);
	border-radius: 20px;
	padding: 2px 8px;
	white-space: nowrap;
}

/* ── CTA row ────────────────────────────────────────────────── */
.rx-acct-compare__row--cta .rx-acct-compare__cell {
	background: rgba(10, 14, 36, 0.85) !important;
	padding: 14px 10px;
	justify-content: center;
}
.rx-acct-compare__row--cta .rx-acct-compare__cell--label {
	background: rgba(7, 10, 26, 0.90) !important;
}

/* CTA button inside the table.
   Compact + content-hugging so the label can never overrun the border.
   Reset across states, then !important on visual props to beat any
   later-loading Elementor Kit link styles. */
.rx-acct-compare__cta,
.rx-acct-compare__cta:hover,
.rx-acct-compare__cta:focus,
.rx-acct-compare__cta:active {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
}
.rx-acct-compare__cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	padding: 7px 14px !important;
	border-radius: 8px !important;
	background: rgba(220, 79, 44, 0.15) !important;
	border: 1px solid rgba(220, 79, 44, 0.35) !important;
	color: rgba(220, 79, 44, 0.90) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	width: auto !important;
	transition: background 200ms, border-color 200ms, color 200ms !important;
}
.rx-acct-compare__cta svg {
	flex-shrink: 0 !important;
}
.rx-acct-compare__cta:hover {
	background: rgba(220, 79, 44, 0.25) !important;
	border-color: rgba(220, 79, 44, 0.55) !important;
	color: #fff !important;
}

/* ============================================================
   Mobile — transpose the wide table into stacked account cards.
   A 7-column comparison can't fit phone width, so below 768px we
   hide the table entirely and show one glass card per account.
   No horizontal scroll.
   ============================================================ */

.rx-acct-compare__cards { display: none; }

@media (max-width: 767px) {
	.rx-acct-compare__scroll { display: none; }
	.rx-acct-compare__cards {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-top: 4px;
	}
}

/* Per-account card */
.rx-acct-compare__mcard {
	padding: 16px 18px 18px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(13, 19, 44, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.rx-acct-compare__mcard.is-featured {
	border-color: rgba(220, 79, 44, 0.35);
	box-shadow:
		0 0 0 1px rgba(220, 79, 44, 0.18),
		0 16px 40px rgba(0, 0, 0, 0.40);
}

.rx-acct-compare__mhead {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.rx-acct-compare__mhead .rx-acct-compare__acct-name {
	font-size: 17px;
}

/* Spec rows: label left, value right */
.rx-acct-compare__mrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.rx-acct-compare__mrow:last-of-type { border-bottom: none; }

.rx-acct-compare__mlabel {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.38);
}
.rx-acct-compare__mval {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-align: right;
}

/* Full-width CTA — reset states then !important to beat kit link styles */
.rx-acct-compare__mcta,
.rx-acct-compare__mcta:hover,
.rx-acct-compare__mcta:focus,
.rx-acct-compare__mcta:active {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
}
.rx-acct-compare__mcta {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.4rem !important;
	margin-top: 14px !important;
	padding: 11px 16px !important;
	border-radius: 10px !important;
	background: linear-gradient(135deg, var(--rx-orange), var(--rx-orange-600)) !important;
	color: #fff !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-shadow: 0 6px 18px rgba(220, 79, 44, 0.26) !important;
}

/* ── Step-2 head + toggle: wrap tidily on small screens ─────── */
@media (max-width: 560px) {
	.rx-acct-step__head {
		flex-wrap: wrap;
		row-gap: 0.7rem;
	}
	.rx-acct-step__head .rx-acct-compare-toggle {
		margin-left: auto !important;
	}
}