/* ==========================================================================
   front.css — A pontgyűjtés front oldali elemei.
   CSAK OTT töltődik be, ahol van pont-jelölés: kosár, kassza, fiókoldal,
   termékoldal, és a terméklista is akkor, ha a lista-megjelenítés be van
   kapcsolva (lásd includes/Admin/Assets.php). Kikapcsolt rendszernél egyetlen
   bájt sem.
   A SZÍNEK A TÉMA TOKENJEIBŐL jönnek, tartalék értékkel: ha a bővítmény egy
   másik témában fut, akkor sem lesz olvashatatlan.
   NULLA ÜRES SOR. Tabulátor behúzás.
   ========================================================================== */
.lp-box {
	margin: 0 0 16px;
	padding: 14px 16px;
	background: var(--c-primary-wash, #eaf5ff);
	border: 1px solid var(--c-line, #e1e1e1);
	border-radius: var(--r-sm, 5px);
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-text, #051d33);
}
.lp-box__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}
.lp-box__title {
	font-size: 14px;
	font-weight: 700;
}
.lp-box__balance {
	font-size: 13px;
	color: var(--c-text-soft, #4a5b6b);
}
.lp-box__note,
.lp-box__guest {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--c-text-soft, #4a5b6b);
}
.lp-box__form {
	margin-top: 10px;
}
.lp-box__label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
}
.lp-box__row {
	display: flex;
	gap: 8px;
}
.lp-box__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--c-line-soft, #dddddd);
	border-radius: var(--r-sm, 5px);
	background: var(--c-surface, #ffffff);
	font-size: 14px;
	color: inherit;
}
.lp-box__row .btn {
	flex: 0 0 auto;
}
.lp-box__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 8px;
}
.lp-box__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-primary-aa, #0b6fcc);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}
.lp-box__link:hover {
	text-decoration: none;
}
.lp-box__hint {
	margin: 8px 0 0;
	font-size: 11px;
	color: var(--c-text-soft, #4a5b6b);
}
.lp-box__active {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--c-line, #e1e1e1);
	font-size: 13px;
}
.lp-box__earn {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--c-text-soft, #4a5b6b);
}
.lp-box__msg {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--c-green-aa, #0b7c17);
	min-height: 1em;
}
.lp-box__msg.is-error {
	color: var(--c-sale, #d92d20);
}
.lp-box.is-busy {
	opacity: .6;
	pointer-events: none;
}
.lp-points {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--c-text-soft, #4a5b6b);
}
.lp-points--loop {
	margin: 2px 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-green-aa, #0b7c17);
}
.lp-points--single {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0;
	padding: 12px 16px;
	border: 1px solid #b9e6bf;
	border-radius: var(--r-sm, 5px);
	background: var(--c-green-wash, #eafaec);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-green-aa, #0b7c17);
}
@supports (mask-image: none) or (-webkit-mask-image: none) {
	.lp-points--single::before {
		content: "";
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.8l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.6l-6.2 3.3 1.2-6.9-5-4.9 6.9-1z'/></svg>") center / 20px 20px no-repeat;
		mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.8l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.6l-6.2 3.3 1.2-6.9-5-4.9 6.9-1z'/></svg>") center / 20px 20px no-repeat;
	}
}
.lp-account__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
.lp-account__card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	background: var(--c-surface, #ffffff);
	border: 1px solid var(--c-line, #e1e1e1);
	border-radius: var(--r-sm, 5px);
}
.lp-account__card-label {
	font-size: 13px;
	color: var(--c-text-soft, #4a5b6b);
}
.lp-account__card-value {
	font-size: 20px;
	line-height: 1.2;
}
.lp-account__card-sub {
	font-size: 11px;
	color: var(--c-text-mute, #999999);
}
.lp-account__warn {
	margin: 0 0 20px;
	padding: 10px 14px;
	background: var(--c-warn-wash, #fef6ee);
	border: 1px solid var(--c-warn, #b54708);
	border-radius: var(--r-sm, 5px);
	font-size: 13px;
	color: var(--c-warn, #b54708);
}
.lp-account__title {
	margin: 24px 0 10px;
	font-size: 16px;
}
.lp-account__rules {
	margin: 0 0 4px;
	padding: 14px 18px;
	border: 1px solid var(--c-line, #e4e4e4);
	border-radius: var(--r-sm, 5px);
	background: var(--c-cream, #f9eecf);
}
.lp-account__rules .lp-account__title {
	margin: 0 0 8px;
	font-size: 15px;
}
.lp-account__rules ul {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.55;
}
.lp-account__rules li {
	list-style: disc outside;
}
.lp-account__rules li::marker {
	color: var(--c-primary-aa, #0b6fcc);
}
.lp-account__rules li + li {
	margin-top: 4px;
}
.lp-account__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.lp-account__table th,
.lp-account__table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--c-line, #e1e1e1);
	text-align: left;
	vertical-align: top;
}
.lp-account__table th {
	font-size: 13px;
	color: var(--c-text-soft, #4a5b6b);
}
.lp-account__table .lp-plus {
	color: var(--c-green-aa, #0b7c17);
	font-weight: 600;
	white-space: nowrap;
}
.lp-account__table .lp-minus {
	color: var(--c-sale, #d92d20);
	font-weight: 600;
	white-space: nowrap;
}
.lp-account__tag {
	display: inline-block;
	padding: 1px 6px;
	border-radius: var(--r-full, 999px);
	background: var(--c-page, #fafafa);
	font-size: 11px;
	color: var(--c-text-soft, #4a5b6b);
	white-space: nowrap;
}
.lp-account__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}
.lp-account__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: 0 8px;
	border: 1px solid var(--c-line, #e1e1e1);
	border-radius: var(--r-sm, 5px);
	background: var(--c-surface, #ffffff);
	font-size: 13px;
	text-decoration: none;
	color: inherit;
}
.lp-account__page.is-current {
	background: var(--c-primary-aa, #0b6fcc);
	border-color: var(--c-primary-aa, #0b6fcc);
	color: #ffffff;
	font-weight: 600;
}
@media (max-width: 575px) {
	.lp-account__table th:nth-child(4),
	.lp-account__table td:nth-child(4) {
		display: none;
	}
}