/* The site's mobile nav menu hides itself via `transform: translateX(...)` on a
   `position: fixed` element — Chromium still counts that off-screen transformed
   position toward the page's scrollable width, so the whole page gains extra
   horizontal scroll room on mobile (visible as blank space + shifted content).
   That's a global header issue, not something specific to this page, but fixing
   it in the shared site CSS would affect every page's header. Scoping the fix
   here instead (this stylesheet only loads on /plan) contains it to this page
   without touching the header's own style, theme, or open/close behavior —
   `overflow-x: hidden` on body only blocks page-level scroll; it doesn't clip
   or affect position:fixed elements like the menu. */
body { overflow-x: hidden; }

.currency-btn {
	border: 1.5px solid var(--grayMild);
	display: inline-block;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gray);
	position: relative;
	text-align: center;
	transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
	display: none;
}

input[type="radio"].toggle+label {
	cursor: pointer;
	min-width: 36px;
}

input[type="radio"].toggle+label:hover {
	background: none;
	color: var(--primary);
	;
}

input[type="radio"].toggle+label:after {
	/* background: var(--primary);
	; */
	content: "";
	height: 100%;
	position: absolute;
	top: 0;
	transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
	width: 100%;
	z-index: -1;
}

input[type="radio"].toggle.toggle-left+label {
	border-right: 0;
}

input[type="radio"].toggle.toggle-left+label:after {
	left: 100%;
	border-radius: 99px 0 0 99px;
}

input[type="radio"].toggle.toggle-right+label {}

input[type="radio"].toggle.toggle-right+label:after {
	left: -100%;
	border-radius: 0 99px 99px 0;
}

input[type="radio"].toggle:checked+label {
	cursor: default;
	color: #fff;
	transition: color 200ms;
}

input[type="radio"].toggle:checked+label:after {
	left: 0;
	background: var(--primary);
}

.currency-btn-right {
	border-radius: 0 99px 99px 0;
}

.currency-btn-left {
	border-radius: 99px 0 0 99px;
}

.buy-disabled {
	pointer-events: none;
	background-color: var(--grayMild) !important;

}

.plan-alert {
	font-size: 12px;
	color: red;
	/* letter-spacing: 0px; */
}


/* Plans & Pricing redesign — new, uniquely-named classes only.
   Reads the site's existing :root tokens from custom_style.css
   (--primary, --radius, --grayDark, etc.) — does not redefine them,
   does not touch .plans/.planTitle/.availedFeatures (shared elsewhere). */

.plansV2Wrap { max-width: 1180px; margin: 0 auto; }

/* ── billing row: the one control that changes every price on the page,
     so it gets top billing (centered, larger) above everything else ── */
.plansV2BillingRow { display: flex; justify-content: center; margin-bottom: 18px; }

/* ── controls row: category tabs (left) + currency (right), sharing one row
     instead of currency getting its own full-width row above everything ── */
.plansV2Controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.plansV2Currency { display: flex; }

/* wraps the scrollable tab strip so the fade hint below can sit on top of it
   without scrolling away with the tabs themselves */
.plansV2TabsWrap { position: relative; min-width: 0; }
.plansV2TabsWrap::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 28px;
	border-radius: 0 99px 99px 0;
	background: linear-gradient(to right, rgba(255,255,255,0), var(--white));
	pointer-events: none;
}

.plansV2Tabs {
	display: flex;
	min-width: 0;
	gap: 6px;
	background: var(--white);
	border: 1px solid var(--grayMild);
	border-radius: 99px;
	padding: 4px;
	overflow-x: auto;
}
.plansV2Tab {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 99px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gray);
	cursor: pointer;
	transition: var(--animation);
	white-space: nowrap;
	border: none;
	background: transparent;
}
.plansV2Tab.active { background: var(--primary); color: #fff; }
.plansV2Tab .plansV2Count { font-size: 11px; background: rgba(0,0,0,0.08); padding: 1px 6px; border-radius: 99px; }
.plansV2Tab.active .plansV2Count { background: rgba(255,255,255,0.25);color: white; }

.plansV2Tab.soon { opacity: 0.55; cursor: default; }

.plansV2Switches { display: flex; align-items: center; gap: 10px; }

.plansV2Billing { display: flex; background: var(--white); border: 1px solid var(--grayMild); border-radius: 99px; padding: 4px; gap: 2px; }
.plansV2BillingOpt { padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--gray); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.plansV2BillingOpt.active { background: var(--grayDark); color: #fff; }
.plansV2SavePill { font-size: 10px; font-weight: 700; background: #E9F9EF; color: #1F9D55; padding: 2px 6px; border-radius: 99px; }

/* ── card grid ── */
.plansV2Grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 8px; }
/* auto-fit naturally lands on 4 columns at typical desktop widths, and with
   9 plans that stranded a lone card on its own row (4+4+1). Locking to a
   fixed 3 columns here gives a clean 3x3 grid instead, and the extra width
   per card also gives the spec-tile labels (Streams/Day, Max/Stream, etc.)
   more breathing room. Below this width, auto-fit's natural 1-2 columns are
   left alone. */
@media (min-width: 960px) {
	.plansV2Grid { grid-template-columns: repeat(3, 1fr); }
}

.plansV2Card {
	position: relative;
	min-width: 0;
	background: var(--white);
	border: 1px solid var(--grayMild);
	border-radius: 18px;
	padding: 26px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: var(--animation);
}
.plansV2Card.highlight { border-color: var(--primary); box-shadow: 0 10px 30px -8px rgba(119,37,152,0.35); }

.plansV2CardTop { display: flex; align-items: center; gap: 12px; }
.plansV2Icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.plansV2Icon svg { width: 20px; height: 20px; flex-shrink: 0; }
.plansV2NameRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plansV2Name { font-size: 18px; font-weight: 600; color: var(--grayDark); font-family: var(--poppins); }

.plansV2Badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 99px; }
.plansV2Badge.popular { background: var(--primary); color: #fff; }
.plansV2Badge.outline { border: 1px solid currentColor; }
.plansV2Badge.current { background: #E9F9EF; color: #1F9D55; }

.plansV2PriceRow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plansV2PriceNow { font-size: 28px; font-weight: 700; color: var(--grayDark); font-family: var(--poppins); }
.plansV2PriceFree { font-size: 20px; font-weight: 700; color: var(--grayDark); font-family: var(--poppins); }
.plansV2PriceUnit { font-size: 13px; color: var(--grayLight); }
.plansV2PriceWas { font-size: 13px; color: var(--grayLight); text-decoration: line-through; }
.plansV2Discount { font-size: 9px; font-weight: 700; background: rgba(119,37,152,0.14); color: var(--primary); padding: 2px 7px; border-radius: 99px; }

.plansV2DailyChip { display: inline-flex; align-self: flex-start; gap: 4px; background: var(--primaryMild); border-radius: 99px; padding: 3px; cursor: pointer; }
.plansV2DailyChip span { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; color: var(--primary); }
.plansV2DailyChip span.on { background: var(--primary); color: #fff; }

/* ── spec grid ── */
.plansV2SpecGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plansV2SpecCell { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; background: var(--specBg, var(--primaryMild)); min-width: 0; }
.plansV2SpecIcon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--white); }
.plansV2SpecIcon svg { width: 17px; height: 17px; stroke: var(--specColor, var(--primary)); }
.plansV2SpecText { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plansV2SpecVal { font-size: 17px; font-weight: 700; color: var(--grayDark); font-family: var(--poppins); line-height: 1.1; }
.plansV2SpecLabel { font-size: 10px; color: var(--gray); font-weight: 600; letter-spacing: 0.1px; line-height: 1.25; }

/* ── features (grouped by section, each item flagged included/excluded) ── */
.plansV2Features { display: flex; flex-direction: column; gap: 12px; }
.plansV2FeatureSection { display: flex; flex-direction: column; gap: 6px; }
.plansV2SectionLabel { font-size: 10px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.4px; }
.plansV2Features ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.plansV2Features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--gray); }
.plansV2Features li::before {
	content: "";
	width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0;
	border-radius: 50%;
	background-image: linear-gradient(135deg, var(--primary), var(--primaryMedium));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/60% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/60% no-repeat;
}
.plansV2Features li.no { color: var(--grayLight); }
.plansV2Features li.no::before {
	background-image: none;
	background-color: var(--grayLight);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center/55% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center/55% no-repeat;
}
.plansV2Features .plansV2Extra { display: none; }
.plansV2Card.expanded .plansV2Extra { display: flex; }
.plansV2ViewMore { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--primary); cursor: pointer; display: flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; }
.plansV2ViewMore svg { transition: var(--animation); }
.plansV2Card.expanded .plansV2ViewMore svg { transform: rotate(180deg); }

.plansV2Cta { margin-top: auto; text-align: center; padding: 7px 16px; border-radius: 99px; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--animation); text-decoration: none; display: block; }
.plansV2Cta.primary { background: var(--primary); color: #fff; }
.plansV2Cta.primary:hover { background: var(--grayDark); color: #fff; }
.plansV2Cta.ghost { background: var(--primaryMild); color: var(--primary); }
.plansV2Cta.disabled { background: var(--grayMild); color: var(--grayLight); cursor: not-allowed; pointer-events: none; }
.plansV2Note { font-size: 11px; color: var(--grayLight); color: red;
    background: #ff00001a;
    border-radius: 6px;
    line-height: 18px;
    padding: 2px 6px; }

/* ── compare toggle + table ── */
.plansV2CompareToggleRow { display: flex; justify-content: center; margin: 32px 0; }
.plansV2CompareBtn {
	display: flex; align-items: center; gap: 7px;
	padding: 12px 24px; border-radius: 99px;
	border: 1.5px dashed var(--primaryLight);
	background: transparent; color: var(--primary);
	font-size: 13.5px; font-weight: 700; cursor: pointer;
	transition: var(--animation);
}
.plansV2CompareBtn:hover { background: var(--primaryMild); border-style: solid; }
.plansV2CompareBtn svg { transition: var(--animation); }
.plansV2CompareBtn.open svg { transform: rotate(180deg); }

.plansV2Drawer { max-height: 0; overflow: hidden; padding-top: 16px; transition: max-height 0.4s cubic-bezier(.15,.25,.75,1); }
/* generous cap — the table has grown to specs + resolution/file-size + grouped
   feature rows, so a tight max-height here clips real content at the bottom
   (including the Buy Now row) the moment the table grows past it */
.plansV2Drawer.open { max-height: 4000px; }

/* overflow-x:auto forces overflow-y to auto too (per spec, an element can't
   have one axis "visible" and the other scrollable), which clips anything
   that pokes above THIS box's own top edge — like the highlighted column's
   "Most Popular" badge — regardless of the drawer's own padding above. The
   padding-top here (not overflow-y, which the browser would just force back
   to auto) is what actually gives the badge room to render unclipped. */
.plansV2TableWrap { overflow-x: auto; padding-top: 16px; 
	/* border: 1px solid var(--grayMild);  */
	border-radius: 16px; 
	/* background: var(--white); */
	 margin-top: 4px; }
table.plansV2Compare { border-collapse: collapse; width: 100%; min-width: 760px; }
/* resets the site-wide `table thead tr th` rule (custom_style.css) which otherwise
   paints every header cell with a solid --primaryMedium background, not just the highlighted one */
table.plansV2Compare th, table.plansV2Compare td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--grayMild); font-size: 13px; background: var(--white); }
table.plansV2Compare th:first-child, table.plansV2Compare td:first-child { text-align: left; color: var(--grayLight); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
table.plansV2Compare thead th { padding-top: 20px; padding-bottom: 16px; vertical-align: top; }
.plansV2ColHead { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.plansV2ColHead .plansV2Name { font-size: 15px; }
.plansV2ColHead .plansV2ColPrice { font-size: 22px; font-weight: 700; color: var(--grayDark); font-family: var(--poppins); }
table.plansV2Compare th.plansV2HighlightCol, table.plansV2Compare td.plansV2HighlightCol { background: var(--primaryMild); }
th.plansV2HighlightCol { position: relative; }
th.plansV2HighlightCol::before {
	content: "Most Popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.4px; padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
table.plansV2Compare .yes { color: #1F9D55; font-weight: 700; }
table.plansV2Compare .no { color: var(--grayLight); }
table.plansV2Compare tbody tr:last-child td { border-bottom: none; }
.plansV2CompareGroupHead td { background: var(--primaryMild); color: var(--primary); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px; text-align: left !important; }
.plansV2CompareYes { color: #1F9D55; font-weight: 700; font-size: 15px; }
.plansV2CompareNo { color: var(--grayLight); font-weight: 700; font-size: 15px; }
.plansV2TableCta { display: inline-block; padding: 8px 18px; border-radius: 99px; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; }
.plansV2TableCta.primary { background: var(--primary); color: #fff; }
.plansV2TableCta.ghost { background: #fff; border: 1.5px solid var(--primary); color: var(--primary); }
.plansV2TableCta.disabled { background: var(--grayMild); color: var(--grayLight); cursor: not-allowed; pointer-events: none; }

@media (max-width: 640px) {
	.plansV2Controls { flex-direction: row; align-items: stretch; }
}

@media (max-width: 400px) {
	/* "Monthly" / "Annual + Save up to X%" can get tight on the narrowest
	   phones — shrink a little and let the pill drop under "Annual" rather
	   than overflow or force the segmented control itself to wrap apart. */
	.plansV2BillingOpt { padding: 7px 12px; font-size: 12px; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
	.plansV2SavePill { font-size: 9px; padding: 2px 5px; }
}