/* ============================================================
   Тарифы (#sonya-paywall-modal) — light theme: inflated glass.

   Every surface is "puffy" glass in the sampled SONYA palette
   (#2D2D2F / #97979A / #C8C8C8): translucent milky fill, a domed
   highlight across the top, a crisp rim light, a soft inner shade at
   the bottom (the curve turning away from the light) and a floating
   shadow — the same recipe as the sign-in card, pushed further.

   Visual only: scoped to the paywall modal in the light theme; no
   markup, behaviour, prices or checkout logic touched. Dark theme is
   unchanged. Loaded after the CDN styles.css; fold into styles.css on
   the next static release.
   ============================================================ */

[data-theme="light"] #sonya-paywall-modal {
	--pw-ink: #2D2D2F;
	--pw-mid: #97979A;
	--pw-silver: #C8C8C8;
	/* puffy glass: dome + rim + inner side glow + bottom shade */
	--pw-puff:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
		inset 0 0 0 1px rgba(255, 255, 255, 0.45),
		inset 0 0 28px rgba(255, 255, 255, 0.38),
		inset 0 -22px 34px -20px rgba(45, 45, 47, 0.3),
		inset 0 10px 18px -12px rgba(255, 255, 255, 0.7);
	--pw-dome: radial-gradient(120% 70% at 50% -18%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 64%);

	background: rgba(45, 45, 47, 0.14);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
}

/* Modal — a thick, translucent glass slab. */
[data-theme="light"] #sonya-paywall-modal .sonya-modal {
	color: var(--pw-ink);
	border-radius: 36px;
	background:
		radial-gradient(130% 55% at 50% -10%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 62%),
		radial-gradient(90% 40% at 50% 112%, rgba(151, 151, 154, 0.28), rgba(151, 151, 154, 0) 70%),
		linear-gradient(180deg, rgba(240, 240, 242, 0.58) 0%, rgba(200, 200, 200, 0.46) 100%);
	backdrop-filter: blur(34px) saturate(150%);
	-webkit-backdrop-filter: blur(34px) saturate(150%);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.95),
		inset 0 0 0 1px rgba(255, 255, 255, 0.5),
		inset 0 0 50px rgba(255, 255, 255, 0.22),
		inset 0 -34px 60px -34px rgba(45, 45, 47, 0.26),
		inset -21.48px -21.48px 10.74px -21.48px rgba(45, 45, 47, 0.12),
		inset 21.48px 21.48px 10.74px -21.48px rgba(255, 255, 255, 0.8),
		0 2px 6px rgba(45, 45, 47, 0.08),
		0 24px 60px -10px rgba(45, 45, 47, 0.28),
		0 40px 90px -20px rgba(45, 45, 47, 0.22);
}
[data-theme="light"] #sonya-paywall-modal .paywall-title { color: var(--pw-ink) !important; }

/* Close — a small glass bead. */
[data-theme="light"] #sonya-paywall-modal .sonya-modal-close {
	width: 38px;
	height: 38px;
	color: rgba(45, 45, 47, 0.72) !important;
	background: var(--pw-dome), rgba(200, 200, 200, 0.4);
	box-shadow: var(--pw-puff), 0 4px 10px -4px rgba(45, 45, 47, 0.3);
}
[data-theme="light"] #sonya-paywall-modal .sonya-modal-close:hover {
	color: var(--pw-ink) !important;
	background: var(--pw-dome), rgba(255, 255, 255, 0.5);
}

/* Mode switch — a puffy pill holding a puffy graphite bead. */
[data-theme="light"] #sonya-paywall-modal .plans-modes {
	padding: 6px;
	background: var(--pw-dome), rgba(200, 200, 200, 0.34);
	box-shadow: var(--pw-puff), 0 8px 20px -10px rgba(45, 45, 47, 0.28);
}
[data-theme="light"] #sonya-paywall-modal .plans-modes .sonya-auth-tab { color: rgba(45, 45, 47, 0.6) !important; }
[data-theme="light"] #sonya-paywall-modal .plans-modes .sonya-auth-tab:hover { color: var(--pw-ink) !important; background: rgba(255, 255, 255, 0.25); }
[data-theme="light"] #sonya-paywall-modal .plans-modes .sonya-auth-tab.is-active {
	color: #fff !important;
	background:
		radial-gradient(120% 90% at 50% -30%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 62%),
		rgba(45, 45, 47, 0.88);
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
		inset 0 -8px 14px -8px rgba(1, 1, 2, 0.5),
		inset -14px -14px 8px -14px rgba(255, 255, 255, 0.5),
		inset 14px 14px 8px -14px rgba(255, 255, 255, 0.3),
		0 8px 18px -6px rgba(45, 45, 47, 0.45);
}

/* Plan cards — each a soft glass pillow; the chosen one inflates
   brighter and floats higher, outlined by light, not by a black line. */
[data-theme="light"] #sonya-paywall-modal .plan-card {
	border-radius: 28px;
	background: var(--pw-dome), rgba(200, 200, 200, 0.3);
	box-shadow: var(--pw-puff), 0 10px 24px -14px rgba(45, 45, 47, 0.3);
	transition: background 240ms ease, box-shadow 260ms ease, transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
[data-theme="light"] #sonya-paywall-modal .plan-card:hover {
	transform: translateY(-2px);
	background: var(--pw-dome), rgba(255, 255, 255, 0.36);
	box-shadow: var(--pw-puff), 0 16px 30px -14px rgba(45, 45, 47, 0.34);
}
[data-theme="light"] #sonya-paywall-modal .plan-card:has(.plan-card-input:checked) {
	transform: translateY(-3px);
	background:
		radial-gradient(120% 75% at 50% -20%, #ffffff, rgba(255, 255, 255, 0) 66%),
		rgba(255, 255, 255, 0.62);
	box-shadow:
		inset 0 2px 0 #fff,
		inset 0 0 0 1px rgba(255, 255, 255, 0.8),
		inset 0 0 30px rgba(255, 255, 255, 0.5),
		inset 0 -24px 36px -22px rgba(45, 45, 47, 0.3),
		0 0 0 1.5px rgba(45, 45, 47, 0.28),
		0 22px 40px -16px rgba(45, 45, 47, 0.42),
		0 3px 8px rgba(45, 45, 47, 0.1);
}
[data-theme="light"] #sonya-paywall-modal .plan-card:active { transform: translateY(-1px) scale(0.99); }
[data-theme="light"] #sonya-paywall-modal .plan-card:has(.plan-card-input:focus-visible) { outline-color: rgba(45, 45, 47, 0.5); }

[data-theme="light"] #sonya-paywall-modal .plan-card-radio {
	background: rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 0 0 1.5px var(--pw-mid), inset 0 1px 2px rgba(45, 45, 47, 0.15);
}
[data-theme="light"] #sonya-paywall-modal .plan-card:has(.plan-card-input:checked) .plan-card-radio {
	background: radial-gradient(circle at 50% 30%, #5a5a5d, var(--pw-ink));
	box-shadow: inset 0 0 0 5px #fff, 0 0 0 1.5px var(--pw-ink), 0 2px 5px rgba(45, 45, 47, 0.3);
}
[data-theme="light"] #sonya-paywall-modal .plan-card-name { color: rgba(45, 45, 47, 0.78) !important; }
[data-theme="light"] #sonya-paywall-modal .plan-card:has(.plan-card-input:checked) .plan-card-name,
[data-theme="light"] #sonya-paywall-modal .plan-card-amount,
[data-theme="light"] #sonya-paywall-modal .plan-card-val { color: var(--pw-ink) !important; }
[data-theme="light"] #sonya-paywall-modal .plan-card-amount { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
[data-theme="light"] #sonya-paywall-modal .plan-card-period,
[data-theme="light"] #sonya-paywall-modal .plan-card-key { color: rgba(45, 45, 47, 0.58) !important; }
[data-theme="light"] #sonya-paywall-modal .plan-card-specs {
	border-top: 0;
	box-shadow: 0 -1px 0 rgba(45, 45, 47, 0.1), 0 -2px 0 rgba(255, 255, 255, 0.55);
}
[data-theme="light"] #sonya-paywall-modal .plan-card-tag {
	color: rgba(45, 45, 47, 0.72) !important;
	background: var(--pw-dome), rgba(255, 255, 255, 0.4);
	box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(151, 151, 154, 0.35), 0 2px 6px -2px rgba(45, 45, 47, 0.2);
}

/* Consent */
[data-theme="light"] #sonya-paywall-modal .sonya-auth-consent { color: rgba(45, 45, 47, 0.78) !important; }
[data-theme="light"] #sonya-paywall-modal .sonya-auth-consent-text a { color: var(--pw-ink) !important; }
[data-theme="light"] #sonya-paywall-modal .sonya-auth-check {
	border-radius: 7px;
	border-color: transparent;
	background: var(--pw-dome), rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 0 0 1.5px var(--pw-mid), inset 0 -3px 5px -3px rgba(45, 45, 47, 0.25);
}
[data-theme="light"] #sonya-paywall-modal .sonya-auth-consent input:checked + .sonya-auth-check {
	background: radial-gradient(circle at 50% 20%, #5a5a5d, var(--pw-ink));
	border-color: transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(45, 45, 47, 0.3);
}

/* Pay button — a puffy graphite pill; until payment is available, a
   quiet puffy milky pill. */
[data-theme="light"] #sonya-paywall-modal .paywall-pay-btn {
	color: #fff !important;
	background:
		radial-gradient(120% 90% at 50% -30%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 62%),
		rgba(45, 45, 47, 0.88);
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
		inset 0 -12px 20px -12px rgba(1, 1, 2, 0.55),
		inset -14px -14px 8px -14px rgba(255, 255, 255, 0.5),
		inset 14px 14px 8px -14px rgba(255, 255, 255, 0.3),
		0 14px 28px -12px rgba(45, 45, 47, 0.5);
}
[data-theme="light"] #sonya-paywall-modal .paywall-pay-btn:not(:disabled):not([aria-disabled="true"]):hover {
	background:
		radial-gradient(120% 90% at 50% -30%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 62%),
		rgba(45, 45, 47, 0.94);
}
[data-theme="light"] #sonya-paywall-modal .paywall-pay-btn:disabled,
[data-theme="light"] #sonya-paywall-modal .paywall-pay-btn[aria-disabled="true"] {
	opacity: 1;
	color: rgba(45, 45, 47, 0.5) !important;
	background: var(--pw-dome), rgba(200, 200, 200, 0.32);
	box-shadow: var(--pw-puff), 0 10px 22px -14px rgba(45, 45, 47, 0.3);
}
[data-theme="light"] #sonya-paywall-modal .paywall-pay-btn * { color: inherit !important; }

/* Error / already-paid views */
[data-theme="light"] #sonya-paywall-modal .paywall-later-btn { color: rgba(45, 45, 47, 0.7) !important; }
[data-theme="light"] #sonya-paywall-modal .paywall-desc { color: rgba(45, 45, 47, 0.66) !important; }

@media (prefers-reduced-motion: reduce) {
	[data-theme="light"] #sonya-paywall-modal .plan-card,
	[data-theme="light"] #sonya-paywall-modal .plan-card:hover,
	[data-theme="light"] #sonya-paywall-modal .plan-card:has(.plan-card-input:checked) { transform: none; transition: none; }
}