/* Ładowarki Lubelskie – strona płatności (mobile-first) */
:root {
	--cl-ink: #282828;       /* tekst */
	--cl-acc: #419133;       /* akcent 1 (zieleń) */
	--cl-acc-d: #357a29;     /* akcent 1 – hover */
	--cl-acc2: #B2D828;      /* akcent 2 (limonka) */
	--cl-acc2-d: #9cbf1f;
	--cl-muted: #6b6b6b;
	--cl-bg: #f4f5f0;
	--cl-card: #ffffff;
	--cl-line: #e6e7e2;
}
* { box-sizing: border-box; }
.cl-pay-body {
	margin: 0;
	background: var(--cl-bg);
	color: var(--cl-ink);
	font: 400 16px/1.5 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.cl-pay-wrap {
	max-width: 460px;
	margin: 0 auto;
	padding: 20px 16px 40px;
}
/* Nakładka shortcode (wewnątrz motywu) – te same style co wersja samodzielna */
.cl-pay-app {
	max-width: 460px;
	margin: 0 auto;
	font: 400 16px/1.5 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color: var(--cl-ink);
}
.cl-pay-body .cl-pay-app { padding: 20px 16px 40px; }
.cl-pay-logo { text-align: center; margin: 0 0 10px; }
.cl-pay-logo img {
	max-width: 160px; max-height: 90px;
	width: auto; height: auto; object-fit: contain;
	display: inline-block;
}
.cl-head { text-align: center; }
.cl-head h1 { font-size: 22px; margin: 6px 0 2px; }
.cl-sub { color: var(--cl-muted); margin: 0 0 8px; }
.cl-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; color: #4a4a4a; font-size: 14px; margin: 0 0 14px; }
.cl-status { font-weight: 600; }
.cl-status-czynny { color: var(--cl-acc); }
.cl-status-nieczynny { color: #9ca3af; }
.cl-desc { color: #374151; font-size: 15px; margin: 0 0 14px; }

.cl-card {
	background: var(--cl-card);
	border: 1px solid var(--cl-line);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cl-card h2 { font-size: 17px; margin: 0 0 14px; }

.cl-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.cl-step {
	width: 56px; height: 56px;
	border: 1px solid var(--cl-line);
	background: #f9fafb;
	border-radius: 14px;
	font-size: 28px; line-height: 1;
	color: var(--cl-ink);
	cursor: pointer;
	touch-action: manipulation;
}
.cl-step:active { background: #eef2f7; }
.cl-hours { text-align: center; flex: 1; }
.cl-hours span { font-size: 40px; font-weight: 700; display: block; }
.cl-hours small { color: var(--cl-muted); }

.cl-rate { text-align: center; color: var(--cl-muted); font-size: 14px; margin: 4px 0 16px; }

.cl-field { margin: 12px 0; }
.cl-field label { display: block; font-size: 13px; color: var(--cl-muted); margin-bottom: 6px; }
.cl-field input {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--cl-line);
	border-radius: 12px;
	font-size: 16px;
}
.cl-field input:focus { outline: none; border-color: var(--cl-acc); box-shadow: 0 0 0 3px rgba(65,145,51,.18); }

.cl-total {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 0; margin-top: 8px;
	border-top: 1px solid var(--cl-line);
}
.cl-total strong { font-size: 24px; color: var(--cl-acc); }

.cl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%;
	padding: 16px;
	border: 0; border-radius: 14px;
	font-size: 17px; font-weight: 700;
	cursor: pointer; text-decoration: none;
	touch-action: manipulation;
}
.cl-btn-pay { background: var(--cl-acc); color: #fff; }
.cl-btn-pay:active { background: var(--cl-acc-d); }
.cl-btn-pay:disabled { opacity: .65; cursor: default; }
.cl-btn-ghost { background: #fff; color: var(--cl-ink); border: 1px solid var(--cl-line); margin-top: 10px; }
.cl-blik {
	background: var(--cl-acc2); color: var(--cl-ink);
	font-size: 12px; font-weight: 800; letter-spacing: .5px;
	padding: 3px 7px; border-radius: 6px;
}

.cl-err { color: #b32d2e; font-size: 14px; text-align: center; margin: 10px 0 0; min-height: 1px; }
.cl-secure { text-align: center; color: var(--cl-muted); font-size: 12px; margin: 12px 0 0; }

/* Ekran statusu */
#cl-status-card { text-align: center; }
#cl-status-card.cl-paid { border-color: var(--cl-acc); }

.cl-paid-lead { color: var(--cl-ink); margin: 4px 0 12px; }
.cl-code {
	font: 800 30px/1.1 'Sora', system-ui, sans-serif;
	letter-spacing: 3px;
	color: var(--cl-ink);
	background: var(--cl-acc2);
	border-radius: 12px;
	padding: 16px 12px;
	margin: 0 0 14px;
	user-select: all;
}
.cl-receipt {
	display: grid; grid-template-columns: auto 1fr;
	gap: 4px 14px; text-align: left;
	margin: 0 0 8px; font-size: 14px;
}
.cl-receipt dt { color: var(--cl-muted); }
.cl-receipt dd { margin: 0; font-weight: 600; }
.cl-paid-note { color: var(--cl-muted); font-size: 12px; margin: 8px 0 0; }
.cl-spinner {
	width: 40px; height: 40px; margin: 4px auto 14px;
	border: 4px solid #e5e7eb; border-top-color: var(--cl-acc);
	border-radius: 50%; animation: cl-spin .9s linear infinite;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }

.cl-error-card { text-align: center; }
.cl-error-card code { background: #f3f4f6; padding: 2px 6px; border-radius: 6px; }