/* ly.my premium + account pages
   one font and three sizes everywhere inside .premium-box; also undoes the main site's
   custom.css rules (20px bold placeholders, full-width inputs, forced link colours) here only */

.premium-box {
	--pr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pr-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	--pr-text: 15px;	/* everything: text, forms, buttons, tables */
	--pr-small: 13px;	/* hints, small buttons, badges */
	--pr-heading: 20px;	/* section headings */
	--pr-accent: #54D6FD;
	--pr-accent-dark: #1a9ac0;
	--pr-muted: #6c757d;

	text-align: left;
	font-family: var(--pr-font);
	font-size: var(--pr-text);
	line-height: 1.5;
	color: #212529;
}

/* same size for every element, whatever bootstrap or custom.css say */
.premium-box p, .premium-box li, .premium-box label, .premium-box td, .premium-box th,
.premium-box .alert, .premium-box .form-control, .premium-box .input-group-text,
.premium-box .btn, .premium-box input, .premium-box select, .premium-box textarea, .premium-box button {
	font-family: var(--pr-font);
	font-size: var(--pr-text);
	line-height: 1.5;
}

/* headings keep the site's Oswald look */
.premium-box h4 {
	font-family: 'Oswald', sans-serif;
	font-size: var(--pr-heading);
	font-weight: 400;
	line-height: 1.3;
	margin: 22px 0 8px;
}
.premium-box h4:first-child { margin-top: 0; }

/* small text */
.premium-box .hint, .premium-box small, .premium-box .badge, .premium-box .test-badge,
.premium-box .btn-sm, .premium-box h4 .hint, .premium-box h4 small {
	font-family: var(--pr-font);
	font-size: var(--pr-small);
}
.premium-box .hint { color: var(--pr-muted); }

/* forms */
.premium-box label { font-weight: 600; margin: 10px 0 3px; display: block; }
.premium-box label.check { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.premium-box input[type=checkbox] { width: auto; display: inline-block; margin: 0; }
.premium-box .form-control { display: block; height: auto; padding: 6px 10px; }
.premium-box .input-group .form-control { display: block; width: 1%; }
.premium-box ::placeholder {
	font-family: var(--pr-font);
	font-size: var(--pr-text);
	font-weight: 400 !important;
	color: #a0a6ab !important;
}

/* buttons */
.premium-box .btn { padding: 6px 14px; }
.premium-box .btn-sm { padding: 2px 8px; }
.premium-box .btn-premium { background-color: var(--pr-accent); border-color: var(--pr-accent); color: #fff; font-weight: 600; }
.premium-box .btn-premium:hover { background-color: #31B0D5; border-color: #31B0D5; color: #fff; }
.premium-box .btn-buy { width: 100%; max-width: 420px; padding: 10px 14px; }

/* links (custom.css forces a light blue with !important) */
.premium-box a:link, .premium-box a:visited { color: var(--pr-accent-dark) !important; }
.premium-box a.btn-premium:link, .premium-box a.btn-premium:visited { color: #fff !important; }
.premium-box a.btn-outline-secondary:link, .premium-box a.btn-outline-secondary:visited { color: #6c757d !important; }
.premium-box a.btn-outline-secondary:hover { color: #fff !important; }

/* private link box */
.premium-box .private-link {
	font-family: var(--pr-mono);
	font-size: var(--pr-small);
	word-break: break-all;
	background: #fff8e1;
	border: 1px dashed #f0b400;
	padding: 10px 12px;
	border-radius: 4px;
}

/* tables */
.premium-box table { background: #fff; margin-bottom: 0; }
.premium-box td, .premium-box th { vertical-align: middle !important; }
.premium-box th { font-weight: 600; }
.premium-box .dest { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; }

/* statistics */
.premium-box .bar { background: var(--pr-accent); height: 14px; min-width: 2px; border-radius: 2px; }
.premium-box .stat-title { font-weight: 600; display: block; margin-bottom: 4px; }

.premium-box .test-badge { background: #ffc107; color: #000; padding: 2px 8px; border-radius: 3px; font-weight: 600; }