/* ===========================================================================
   lg.premium — the upper section of the premium order page
   (_pages/premium.php), in the beta look
   ---------------------------------------------------------------------------

     .leader.leader--hero.leader--premium        plain page ground (header.php)
       .leader-content.lg-premium                panel + reviews side by side
         --three-terms / --one-term              NEW_TERMS 1 / 0
         .panel.premium-panel                    the white order card, holding
                                                 head, features and checkout box
           p.lg-premium__terms-switch            only while ?terms= is forced
           h1, p.main-text, ul.premium-list      head and the feature list
           .checkout-section                     the soft box (surface-alt)
             .premium-box                        around everything below
               .order-step1.premium-subscriptions  3 terms: three white cards,
                 .premium-subscription.subscription-box   the year preselected
                   .premium-subscription__badge  (pink, "save 48%")
               .order-step1 > .subscription-box  1 term (and the reorder list):
                                                 white row, price + button
               .order-step2                      summary, payment options
             ul.lg-premium__trust                pay once, no renewal, support
             .change-currency(-content)          currency switcher
         .lg-premium__side                       payment screen only:
           .lg-premium__visual                   photo as a blob (desktop)
         aside.lg-reviews-panel                  score + one review at a time
                                                 (lg.reviews.css); editions
                                                 without reviews page:
                                                 aside.lg-premium__reviews

   The markup and its class names are what js/main2025.js drives (steps,
   currency switch, prices), so only the look changes here. Every rule is
   scoped to .lg-premium: the page's own <style> block comes later in the
   document, and the extra class is what lets these rules win over it.
   =========================================================================== */

/* --- Layout --------------------------------------------------------------- */
.content.leader-content.lg-premium {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem 2rem;
	width: 100%;
	min-height: 0;
	padding-top: 2.5rem;
	padding-bottom: 3rem;
	box-sizing: border-box;
	color: var(--lg-text);
	font-family: var(--lg-font);
}

/* --- The order card ------------------------------------------------------- */
/* White card holding head, features and the checkout box (as in the Lovable
   mockup, beta/mockups/premium.jpg). A hairline and a very soft shadow keep
   it light; the darker checkout box inside is where to act. */
.lg-premium .panel.premium-panel {
	display: block;
	flex: 0 1 640px;
	width: auto;
	max-width: 640px;
	margin: 0;
	padding: 2.25rem 2.25rem 2rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	box-shadow: 0 8px 28px rgba(var(--lg-shadow-rgb), 0.06);
	box-sizing: border-box;
}

/* Three plan cards need the room. */
.lg-premium--three-terms .panel.premium-panel {
	flex-basis: 700px;
	max-width: 700px;
}

.lg-premium .premium-panel h1 {
	margin: 0 0 0.6rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.lg-premium .premium-panel h2 {
	margin: 0 0 0.6rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.25;
}

.lg-premium .premium-panel .main-text {
	margin: 0 0 1.25rem;
	max-width: 52ch;
	color: var(--lg-text-soft);
	font-size: 1.1rem;
	line-height: 1.55;
}

/* "Terms forced for this session" - a testing aid, kept small but obvious. */
.lg-premium__terms-switch {
	margin: 0 0 1.25rem;
	padding: 0.55rem 0.85rem;
	border-radius: var(--lg-radius-lg);
	background-color: var(--lg-status-started-bg);
	color: var(--lg-status-started-text);
	font-size: 0.85rem;
	line-height: 1.45;
}

.lg-premium__terms-switch strong { font-weight: 700; }
.lg-premium__terms-switch a { color: inherit; text-decoration: underline; }

/* --- Feature list --------------------------------------------------------- */
/* The icon stays the li's own (inline) background image. Name in bold, the
   rest softer (premium_feature_label() in _pages/premium.php), so the list
   reads by its names. */
.lg-premium ul.premium-list {
	margin: 0 0 1.75rem;
	padding: 0;
}

.lg-premium ul.premium-list li {
	min-height: 1.5rem;
	margin: 0 0 0.7rem;
	padding: 0 0 0 2.2rem;
	background-position: 0 0.1rem;
	background-size: 1.35rem auto;
	background-repeat: no-repeat;
	box-sizing: border-box;
	color: var(--lg-text-soft);
	font-size: 1.02rem;
	line-height: 1.5;
}

.lg-premium .premium-list__label {
	color: var(--lg-text);
	font-weight: 700;
}

.lg-premium .premium-list__sep {
	color: var(--lg-text-muted);
}

/* Sections with a bar icon (premium_li_open()): the line icon of the mobile
   bottom navigation, in coral, instead of the old image. background-image:
   none, as the page's inline CSS gives every li the check2.png. Sized here
   because lg.bottom-nav.css is not on every page that has this list. */
.lg-premium ul.premium-list li.premium-list__item--nav-icon {
	position: relative;
	background-image: none;
}

.lg-premium .premium-list__icon {
	position: absolute;
	top: 0.12rem;
	left: 0;
	color: var(--lg-red);
}

.lg-premium .premium-list__icon .lg-bottom-nav__icon {
	display: block;
	width: 1.3rem;
	height: 1.3rem;
}

/* Targeted checkout (one language): "200% more than free" after the count. */
.lg-premium .premium-list__more {
	display: inline-block;
	margin-left: 0.3rem;
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	background-color: var(--lg-ok-bg);
	color: var(--lg-ok-text);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: 0.05rem;
}

/* Gift line under the list: "Premium content for 15 languages", one line in
   the list's own size, only the dashed pink frame sets it apart. */
.lg-premium .lg-premium__gift {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: -0.6rem 0 1.75rem;
	padding: 0.4rem 0.85rem 0.4rem 0.6rem;
	border: 1px dashed var(--lg-score);
	border-radius: var(--lg-radius-card);
	background-color: rgba(228, 181, 72, 0.12);
	color: var(--lg-text);
	text-decoration: none;
	box-sizing: border-box;
}

.lg-premium .lg-premium__gift:hover {
	background-color: rgba(228, 181, 72, 0.2);
}

.lg-premium .lg-premium__gift-icon {
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	color: var(--lg-text);
}

.lg-premium .lg-premium__gift-text {
	font-size: 1.02rem;
	line-height: 1.4;
}

.lg-premium .lg-premium__gift-label {
	color: var(--lg-text-soft);
}

.lg-premium .lg-premium__gift-value {
	margin-left: 0.25rem;
	font-weight: 700;
}

.lg-premium ul.premium-list li:last-child {
	margin-bottom: 0;
}

/* "more" behind each line. */
.lg-premium ul.premium-list li a {
	margin-left: 0.2rem;
	color: var(--lg-text-muted);
	text-decoration: underline;
}

.lg-premium ul.premium-list li a:hover {
	color: var(--lg-red);
}

/* --- Buttons -------------------------------------------------------------- */
/* .premium-button is a div that main2025.js listens on; it gets the look of
   .lg-btn--primary. */
.lg-premium .premium-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	background-color: var(--lg-red);
	color: var(--lg-text-inverse);
	font-family: var(--lg-font);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-shadow: 1px 1px var(--lg-red-shadow);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.lg-premium .premium-button:hover {
	background-color: var(--lg-red-hover);
}

/* Next to the preselected year, the other buttons step back: one red CTA. */
.lg-premium .premium-subscription.subscription-box:not([data-subscription="1year"]) .premium-button {
	border: 1px solid var(--lg-border-strong);
	background-color: var(--lg-surface);
	color: var(--lg-text);
	text-shadow: none;
}

.lg-premium .premium-subscription.subscription-box:not([data-subscription="1year"]) .premium-button:hover {
	border-color: var(--lg-red);
	background-color: var(--lg-surface);
	color: var(--lg-text);
}

/* --- The checkout box ----------------------------------------------------- */
/* One soft box around everything to act on: plans (or step 2), the
   reassurance row, the conditions and the currency switch. Plans and rows
   inside are white. */
.lg-premium .checkout-section {
	padding: 1.25rem 1.1rem 1rem;
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface-alt);
	box-sizing: border-box;
}

/* --- 3 terms: the plan cards ---------------------------------------------- */
/* The room above the cards is for the year's badge. */
.lg-premium .premium-subscriptions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	width: 100%;
	padding: 0.4rem 0 0;
	box-sizing: border-box;
}

.lg-premium .premium-subscription.subscription-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: auto;
	margin: 0;
	padding: 1.25rem 0.9rem 0.9rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	box-sizing: border-box;
	text-align: center;
}

/* The year is preselected: red ring, a hint of pink on the white. */
.lg-premium .premium-subscription.subscription-box[data-subscription="1year"] {
	border-color: var(--lg-red);
	box-shadow: inset 0 0 0 1px var(--lg-red), 0 6px 18px rgba(229, 88, 83, 0.12);
	background-image: linear-gradient(rgba(229, 88, 83, 0.06), rgba(229, 88, 83, 0.06));
}

/* "Save 48%" sitting on the year card's top edge. */
.lg-premium .premium-subscription__badge {
	position: absolute;
	top: 0;
	left: 50%;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background-color: var(--lg-red);
	color: var(--lg-text-inverse);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

.lg-premium .premium-subscription__title {
	display: block;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: inherit;
}

/* The total is what gets paid, once - the big number. */
/* Step 2: "249 Kč for 1 year" - the amount in the same type as the plan
   cards' totals, so the price reads the same on both screens. */
.lg-premium .order-summary__amount {
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.lg-premium .premium-subscription__total {
	display: block;
	padding: 0.55rem 0 0.15rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-align: inherit;
}

/* "2,90 € per month": small, only for comparing the terms. */
.lg-premium .premium-subscription__per-month {
	display: block;
	padding: 0 0 0.9rem;
	color: var(--lg-text-muted);
	font-size: 0.85rem;
	line-height: 1.4;
	text-align: inherit;
}

.lg-premium .premium-subscription.subscription-box .premium-button {
	display: flex;
	margin-top: auto;
	padding: 0.75rem 0.5rem;
	white-space: normal;
}

/* --- 1 term (and the reorder list): price and button in one row ----------- */
.lg-premium .order-step1 > .subscription-box:not(.premium-subscription) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin: 0 0 0.6rem;
	padding: 1rem 1rem 1rem 1.4rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	box-sizing: border-box;
}

.lg-premium .order-step1 > .subscription-box:last-child {
	margin-bottom: 0;
}

/* "<span><b>18 €</b> </span><span>for <b>1 year</b></span>" */
.lg-premium .premium-box span.premium-button-price {
	display: inline-block;
	flex: 1 1 auto;
	width: auto;
	margin: 0;
	padding: 0;
	color: var(--lg-text-soft);
	font-size: 1rem;
	line-height: 1.35;
}

.lg-premium .premium-box span.premium-button-price b {
	color: var(--lg-text);
	font-weight: 700;
}

.lg-premium .premium-box span.premium-button-price > span:first-child b {
	font-family: var(--lg-font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* Reorder list: 1 year preselected like the year card of the plans (red
   ring, a hint of pink, the one red button); 2/3/5 years get the ghost
   button and carry their "save" chip instead. */
.lg-premium .order-step1 > .subscription-box--reorder.subscription-box--preselected {
	border-color: var(--lg-red);
	box-shadow: inset 0 0 0 1px var(--lg-red), 0 6px 18px rgba(229, 88, 83, 0.12);
	background-image: linear-gradient(rgba(229, 88, 83, 0.06), rgba(229, 88, 83, 0.06));
}

.lg-premium .order-step1 > .subscription-box--reorder:not(.subscription-box--preselected) .premium-button {
	border: 1px solid var(--lg-border-strong);
	background-color: var(--lg-surface);
	color: var(--lg-text);
	text-shadow: none;
}

.lg-premium .order-step1 > .subscription-box--reorder:not(.subscription-box--preselected) .premium-button:hover {
	border-color: var(--lg-red);
	background-color: var(--lg-surface);
	color: var(--lg-text);
}

/* Reorder list: "save 20 %" as a green chip between price and button. */
.lg-premium .order-step1 > .subscription-box .premium-discount-bubble {
	position: static;
	order: 1;
	width: auto;
	height: auto;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background-color: var(--lg-ok-bg);
	color: var(--lg-ok-text);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
}

.lg-premium .order-step1 > .subscription-box .premium-button {
	order: 2;
}

/* --- Step 2: summary and payment ------------------------------------------ */
/* Already inside the checkout box, so no ground of its own. */
.lg-premium .order-step2 {
	margin: 0;
	padding: 0.25rem 0.3rem 0;
	border-radius: 0;
	background-color: transparent;
}

.lg-premium #paymentoptions {
	margin-bottom: 1rem;
	border: 0;
	border-bottom: 1px solid var(--lg-border);
}

.lg-premium #paymentoptions .checkmark {
	border-color: var(--lg-border-input);
	background-color: var(--lg-surface);
}

.lg-premium .order-step2 .premium-button-price {
	margin-left: 1rem;
}

/* --- Currency switcher ---------------------------------------------------- */
/* Indented like the reassurance row above it. */
.lg-premium .change-currency,
.lg-premium .premium-conditions {
	margin-left: 0.3rem;
	margin-right: 0.3rem;
}

.lg-premium .change-currency {
	color: var(--lg-text-muted);
	text-decoration: underline;
	cursor: pointer;
}

.lg-premium .change-currency:hover {
	color: var(--lg-red);
}

/* The chips are white on the checkout box; the list needs no ground. */
.lg-premium .change-currency-content {
	margin: 0.6rem -0.2rem 0;
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--lg-text);
}

.lg-premium .change-currency-content .select-currency {
	min-width: 3rem;
	margin: 0.2rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--lg-border);
	border-radius: 999px;
	background-color: var(--lg-surface);
	font-size: 0.85rem;
}

.lg-premium .change-currency-content .select-currency:hover {
	border-color: var(--lg-red);
	font-weight: inherit;
}

/* --- Reassurance row ------------------------------------------------------ */
/* Under the plans, a hairline above it, inside the checkout box. */
.lg-premium__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin: 1rem 0.3rem 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--lg-border);
	list-style: none;
}

.lg-premium__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	color: var(--lg-text-soft);
	font-size: 0.9rem;
	line-height: 1.35;
}

.lg-premium__trust-item svg {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
}

.lg-premium__trust-item--check svg,
.lg-premium__trust-item--shield svg { color: var(--lg-status-perfect-text); }
.lg-premium__trust-item--heart svg { color: var(--lg-red); }

/* --- Bulk orders ---------------------------------------------------------- */
/* One quiet line under the checkout box: grey, small, no button - there for
   teachers who look for it, out of the way of a learner buying for themself. */
.lg-premium__pro {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 1.1rem 0.3rem 0;
	padding: 0;
	color: var(--lg-text-muted);
	font-size: 0.88rem;
	line-height: 1.45;
}

.lg-premium__pro svg {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.05rem;
}

.lg-premium__pro a {
	color: var(--lg-text-soft);
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}

.lg-premium__pro a:hover {
	color: var(--lg-red);
}

/* --- Reviews beside the column -------------------------------------------- */
.lg-premium__reviews {
	display: block;
	flex: 0 0 auto;
	max-width: 300px;
	margin: 0;
	padding: 1rem 1.2rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	box-sizing: border-box;
}

.lg-premium__reviews-label {
	display: block;
	margin: 0 0 0.4rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

/* The hero line brings its own tray; the aside is the tray here. */
.lg-premium__reviews .lg-rating-line {
	margin: 0;
	padding: 0;
	background: none;
}

/* The reviews card beside the checkout (lg_reviews_panel(), styled in
   lg.reviews.css); only its place in the row is set here. */
.lg-premium .lg-reviews-panel {
	flex: 0 0 300px;
	max-width: 300px;
}

/* --- Right column of the payment screen: photo, then reviews -------------- */
.lg-premium__side {
	display: flex;
	flex: 0 0 360px;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 360px;
	min-width: 0;
}

.lg-premium__side .lg-reviews-panel,
.lg-premium__side .lg-premium__reviews {
	flex: 0 0 auto;
	max-width: none;
}

/* The photo, cut like the start page hero (a.css .lg-hero__visual): an
   irregular blob, a soft gold copy of it peeking out bottom right. Photo and
   underlay share --lg-premium-blob, or their edges stop running parallel.
   Desktop only (see the media query below): on a phone it would push the
   checkout further down for nothing. */
.lg-premium__visual {
	/* Bottom-left kept small (18% / 22%): the hand there points at the order. */
	--lg-premium-blob: 60% 40% 55% 18% / 45% 55% 40% 22%;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 0.92;
}

.lg-premium__shape,
.lg-premium__photo {
	position: absolute;
	inset: 0 14px 14px 0;
	border-radius: var(--lg-premium-blob);
}

.lg-premium__shape {
	background-color: var(--lg-score-track);
	transform: translate(12px, 14px);
}

.lg-premium__photo {
	overflow: hidden;
}

.lg-premium__photo picture,
.lg-premium__photo img {
	display: block;
	width: 100%;
	height: 100%;
}

.lg-premium__photo img {
	object-fit: cover;
	object-position: 0% 30%;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lg-premium__shape { background-color: var(--lg-surface-alt); }
}
:root[data-theme="dark"] .lg-premium__shape { background-color: var(--lg-surface-alt); }

/* Active subscription / waiting screens: the aside is inside the card. */
.premium-panel .lg-reviews-panel,
.premium-panel .lg-premium__reviews {
	max-width: none;
	margin-top: 1.5rem;
}

/* --- Narrower ------------------------------------------------------------- */
/* The reviews go under the card. */
@media (max-width: 1023px) {

	.content.leader-content.lg-premium {
		flex-direction: column;
		align-items: stretch;
		max-width: 700px;
		/* The 700px column in the middle, not on the left */
		margin-left: auto;
		margin-right: auto;
	}

	.lg-premium .panel.premium-panel,
	.lg-premium--three-terms .panel.premium-panel {
		flex-basis: auto;
		max-width: none;
	}

	.lg-premium__reviews,
	.lg-premium .lg-reviews-panel,
	.lg-premium__side {
		flex-basis: auto;
		max-width: none;
	}

	/* Desktop only. The <picture> serves a 1x1 GIF at this width, so the
	   photo is not downloaded either. */
	.lg-premium__visual {
		display: none;
	}
}

/* Phones: the plan cards become rows (name and price left, button right). */
@media (max-width: 560px) {

	.content.leader-content.lg-premium {
		padding-top: 1.5rem;
		padding-bottom: 2rem;
	}

	.lg-premium .panel.premium-panel {
		padding: 0;
		background: none;
		border:none;
		box-shadow:none;
	}

	.lg-premium ul.premium-list {
		padding-left:1.15rem;
		padding-right:1.15rem
	}

	.lg-premium .checkout-section {
		margin: 0 0;
		padding: 1rem 1.15rem 0.9rem;
		background-color: var(--lg-surface-alt);
	}

	.lg-premium .premium-subscriptions {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.9rem;
		padding: 0.4rem 0 0;
	}

	.lg-premium .premium-subscription__badge {
		left: 1.1rem;
		transform: translateY(-50%);
	}

	.lg-premium .premium-subscription.subscription-box {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 1rem;
		padding: 0.85rem 0.9rem 0.85rem 1.1rem;
		text-align: left;
	}

	.lg-premium .premium-subscription__title,
	.lg-premium .premium-subscription__total,
	.lg-premium .premium-subscription__per-month {
		grid-column: 1;
	}

	.lg-premium .premium-subscription__total {
		padding: 0.15rem 0 0;
		font-size: 1.45rem;
	}

	.lg-premium .premium-subscription__per-month {
		padding: 0;
	}

	.lg-premium .premium-subscription.subscription-box .premium-button {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin: 0;
		padding: 0.7rem 1.1rem;
		white-space: nowrap;
	}

	.lg-premium .order-step1 > .subscription-box:not(.premium-subscription) {
		padding: 0.85rem 0.9rem 0.85rem 1.1rem;
	}

	.lg-premium .order-step2 {
		padding: 0.25rem 0.2rem 0;
	}
}