/*
 * CCC Klub — členská sekcia.
 * Farby preberá z témy (var(--...)), s vlastnými zálohami, aby to vyzeralo
 * rozumne aj na inej téme.
 */

.ccc-form,
.ccc-profile,
.ccc-calendar,
.ccc-match,
.ccc-duty,
.ccc-chat,
.ccc-table {
	--c-line:    var(--line, #e1e8ed);
	--c-line-2:  var(--line-2, #cfd9e0);
	--c-ink:     var(--ink, #16212a);
	--c-muted:   var(--muted, #64798a);
	--c-blue:    var(--blue, #1684bf);
	--c-blue-hi: var(--blue-hi, #1071a6);
	--c-gold:    var(--gold, #d9a215);
	--c-green:   var(--green, #1e8a5f);
	--c-red:     var(--red, #c4344a);
	--c-bg2:     var(--bg-2, #f4f7f9);
	--c-radius:  var(--radius, 14px);
	--c-shadow:  var(--shadow, 0 1px 2px rgba(22,33,42,.05), 0 6px 20px rgba(22,33,42,.06));
	font-size: 16px;
	line-height: 1.65;
}

/* --- formuláre ---------------------------------------------------- */

.ccc-form label {
	display: block;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: #3a4e5e;
}

.ccc-form label > span { color: var(--c-red); }

.ccc-form input[type='text'],
.ccc-form input[type='email'],
.ccc-form input[type='tel'],
.ccc-form input[type='url'],
.ccc-form input[type='date'],
.ccc-form input[type='time'],
.ccc-form input[type='number'],
.ccc-form select,
.ccc-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 11px 13px;
	background: #fff;
	border: 1px solid var(--c-line-2);
	border-radius: 9px;
	color: var(--c-ink);
	font: inherit;
	font-size: 14.5px;
	font-weight: 400;
	box-sizing: border-box;
}

.ccc-form input:focus,
.ccc-form select:focus,
.ccc-form textarea:focus {
	outline: none;
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px rgba(22, 132, 191, .13);
}

.ccc-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ccc-row > label { flex: 1 1 170px; }

.ccc-check {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 14.5px;
}
.ccc-check input { margin-top: 5px; }

/* tlačidlá zdieľajú vzhľad s témou */
.ccc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 0;
	border-radius: 9px;
	background: var(--c-blue);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 14.5px;
	cursor: pointer;
	text-decoration: none;
	transition: .15s;
}
.ccc-btn:hover { background: var(--c-blue-hi); color: #fff; }

.ccc-btn-ghost {
	background: #fff;
	color: var(--c-ink);
	border: 1px solid var(--c-line-2);
}
.ccc-btn-ghost:hover { border-color: var(--c-blue); color: var(--c-blue); background: #fff; }

.ccc-hint { color: var(--c-muted); font-size: 14px; }

/* --- oznamy -------------------------------------------------------- */

.ccc-note, .ccc-ok, .ccc-errors {
	padding: 16px 18px;
	border-radius: 11px;
	margin: 0 0 20px;
}
.ccc-note   { background: var(--c-bg2); border: 1px solid var(--c-line); }
.ccc-ok     { background: #e9f7ef; border: 1px solid #a9d9bd; color: #1d7a4a; }
.ccc-errors { background: #fdecea; border: 1px solid #f0b1ab; color: #a3262c; }
.ccc-note h3, .ccc-ok h3 { margin: 0 0 6px; }
.ccc-errors p { margin: 0 0 4px; }

/* --- odznaky ------------------------------------------------------- */

.ccc-badge {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
}
.ccc-badge.is-paid   { background: #e4f4ec; color: var(--c-green); }
.ccc-badge.is-unpaid { background: #fbe9ec; color: var(--c-red); }
.ccc-badge.is-wait   { background: #fbf0d5; color: #8a6708; }

/* --- profil -------------------------------------------------------- */

.ccc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px;
	margin: 0 0 28px;
}

.ccc-card {
	padding: 22px;
	border: 1px solid var(--c-line);
	border-radius: var(--c-radius);
	background: #fff;
	box-shadow: var(--c-shadow);
}

.ccc-card-label {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-muted);
	margin-bottom: 10px;
}

.ccc-big {
	font-family: "Barlow Condensed", inherit;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--c-ink);
}

.ccc-card-note { font-size: 13px; color: var(--c-muted); margin-top: 6px; }
.ccc-green { color: var(--c-green); }

.ccc-payments { display: grid; gap: 14px; }

.ccc-payment {
	display: flex;
	gap: 22px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 22px;
	border: 1px solid var(--c-line);
	border-radius: var(--c-radius);
	background: #fff;
	box-shadow: var(--c-shadow);
}
.ccc-payment.is-paid { background: #fafcfb; opacity: .75; }

.ccc-payment-title { font-weight: 600; font-size: 16px; }

.ccc-payment-amount {
	font-family: "Barlow Condensed", inherit;
	font-size: 38px;
	font-weight: 700;
	color: var(--c-blue);
	line-height: 1.1;
}

.ccc-payment-meta { font-size: 13px; color: var(--c-muted); margin-bottom: 9px; }

.ccc-qr { text-align: center; }
.ccc-qr svg {
	width: 152px;
	height: 152px;
	display: block;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	background: #fff;
}
.ccc-qr-caption {
	font-size: 10px;
	color: #8a99a5;
	margin-top: 5px;
	letter-spacing: .08em;
	font-weight: 600;
	text-transform: uppercase;
}

/* --- kalendár ------------------------------------------------------ */

.ccc-calendar { display: grid; gap: 12px; }

.ccc-event {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-blue);
	border-radius: 11px;
	box-shadow: var(--c-shadow);
}
.ccc-event.is-duty { border-left-color: var(--c-gold); background: #fffdf6; }

.ccc-event-date { text-align: center; min-width: 54px; }
.ccc-day {
	display: block;
	font-family: "Barlow Condensed", inherit;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}
.ccc-mon { display: block; font-size: 11px; text-transform: uppercase; color: var(--c-muted); }

.ccc-event-body h3 { margin: 4px 0 0; font-size: 18px; }
.ccc-tag {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-blue-hi);
}
.ccc-event.is-duty .ccc-tag { color: #8a6708; }
.ccc-event-place { font-size: 13.5px; color: var(--c-muted); }

/* --- preteky / brigády --------------------------------------------- */

.ccc-match, .ccc-duty {
	padding: 22px;
	border: 1px solid var(--c-line);
	border-radius: var(--c-radius);
	background: #fff;
	box-shadow: var(--c-shadow);
	margin: 0 0 18px;
}

.ccc-match header h3, .ccc-duty header h3 { margin: 0 0 4px; font-size: 22px; }

.ccc-match-meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--c-muted);
	margin-bottom: 14px;
}

.ccc-startlist { margin-top: 14px; border-top: 1px solid var(--c-line); padding-top: 12px; }
.ccc-startlist summary { cursor: pointer; font-weight: 600; color: var(--c-blue); }

.ccc-table, .ccc-startlist table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	font-size: 14.5px;
}
.ccc-table th, .ccc-startlist th {
	text-align: left;
	padding: 10px 12px;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--c-muted);
	border-bottom: 1px solid var(--c-line);
}
.ccc-table td, .ccc-startlist td {
	padding: 12px;
	border-bottom: 1px solid var(--c-line);
}

/* --- chat ----------------------------------------------------------- */

.ccc-chat {
	border: 1px solid var(--c-line);
	border-radius: var(--c-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--c-shadow);
}

.ccc-chat-log {
	height: 440px;
	overflow-y: auto;
	padding: 18px;
	background: var(--c-bg2);
}

.ccc-msg { display: flex; gap: 10px; margin-bottom: 14px; }
.ccc-msg-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }

.ccc-msg-body {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 11px;
	padding: 9px 13px;
	max-width: 78%;
}
.ccc-msg.is-mine { flex-direction: row-reverse; }
.ccc-msg.is-mine .ccc-msg-body { background: #e8f3fa; border-color: #bfdcec; }

.ccc-msg-head { font-size: 12px; color: var(--c-muted); margin-bottom: 2px; }
.ccc-msg-text { white-space: pre-wrap; word-break: break-word; }

.ccc-chat-form {
	display: flex;
	gap: 10px;
	padding: 12px;
	border-top: 1px solid var(--c-line);
}
.ccc-chat-form input {
	flex: 1;
	padding: 11px 13px;
	border: 1px solid var(--c-line-2);
	border-radius: 9px;
	font: inherit;
}
.ccc-chat-form input:focus {
	outline: none;
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px rgba(22, 132, 191, .13);
}

.ccc-chat-error { color: var(--c-red); font-size: 14px; padding: 0 12px 10px; }
.ccc-chat-error:empty { display: none; }

/* obal platby v profile */
.ccc-payment-info { flex: 1; min-width: 220px; }

@media (max-width: 640px) {
	.ccc-payment { justify-content: center; text-align: center; }
	.ccc-row > label { flex: 1 1 100%; }
	.ccc-msg-body { max-width: 100%; }
}

/* ============================================================ KALENDÁR */

.ccc-cal {
	--c-line:  var(--line, #e1e8ed);
	--c-ink:   var(--ink, #16212a);
	--c-muted: var(--muted, #64798a);
	--c-blue:  var(--blue, #1684bf);
	--c-gold:  var(--gold, #d9a215);
	--c-bg2:   var(--bg-2, #f4f7f9);
}

.ccc-cal-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.ccc-cal-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-line);
	border-radius: 9px;
	background: #fff;
	color: var(--c-ink);
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}
.ccc-cal-nav:hover { border-color: var(--c-blue); color: var(--c-blue); }

.ccc-cal-title {
	font-family: "Barlow Condensed", inherit;
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	margin-right: auto;
}
.ccc-cal-title span { color: var(--c-muted); font-weight: 500; margin-left: 6px; }

.ccc-cal-today {
	padding: 9px 16px;
	border: 1px solid var(--c-line);
	border-radius: 9px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-ink);
	text-decoration: none;
}
.ccc-cal-today:hover { border-color: var(--c-blue); color: var(--c-blue); }

.ccc-cal-legend {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: var(--c-muted);
	margin-bottom: 12px;
}
.ccc-cal-legend .dot {
	display: inline-block;
	width: 10px; height: 10px;
	border-radius: 3px;
	margin-right: 6px;
}
.dot-match { background: var(--c-blue); }
.dot-duty  { background: var(--c-gold); }

/* --- mriežka --- */

.ccc-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: var(--c-line);
	border: 1px solid var(--c-line);
	border-radius: 12px;
	overflow: hidden;
}

.ccc-cal-dayname {
	background: var(--c-bg2);
	padding: 10px 8px;
	text-align: center;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--c-muted);
}
.ccc-cal-dayname.is-weekend { color: var(--c-blue); }

.ccc-cal-cell {
	background: #fff;
	min-height: 104px;
	padding: 7px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ccc-cal-cell.is-empty { background: #fbfcfd; }
.ccc-cal-cell.is-weekend { background: #fafcfd; }

.ccc-cal-num {
	font-size: 13px;
	font-weight: 600;
	color: var(--c-muted);
	line-height: 1;
}

.ccc-cal-cell.is-today { background: #eef7fc; }
.ccc-cal-cell.is-today .ccc-cal-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	background: var(--c-blue);
	color: #fff;
	border-radius: 50%;
}

.ccc-cal-chip {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	padding: 4px 6px;
	border-radius: 6px;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ccc-cal-chip.is-match { background: #e6f2f9; color: #1071a6; }
.ccc-cal-chip.is-match:hover { background: var(--c-blue); color: #fff; }
.ccc-cal-chip.is-duty { background: #fbf0d5; color: #8a6708; }
.ccc-cal-chip.is-duty:hover { background: var(--c-gold); color: #fff; }

/* --- zoznam pod mriežkou --- */

/* Zoznam udalostí pod mriežkou. NIE obal kalendára — ten má is-view-*. */

/* minmax(0, 1fr), nie 1fr: grid dáva stĺpcu šírku najdlhšieho riadku, takže
   jediný pretek s dlhým názvom („Dynamický Steel Cup Challenge – Liga 2026 –
   FINÁLE“) roztiahol celý zoznam nad šírku telefónu a stránka sa dala posúvať
   do strán. Nula ako spodná hranica dovolí stĺpcu zúžiť sa a text sa zalomí. */
.ccc-cal-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin-top: 24px;
}

.ccc-cal-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-blue);
	border-radius: 11px;
	text-decoration: none;
	color: inherit;
	transition: .15s;
}
.ccc-cal-item:hover { box-shadow: 0 6px 20px rgba(22,33,42,.08); transform: translateX(2px); }
.ccc-cal-item.is-duty { border-left-color: var(--c-gold); background: #fffdf6; }

.ccc-cal-date {
	text-align: center;
	min-width: 46px;
}
.ccc-cal-date b {
	display: block;
	font-family: "Barlow Condensed", inherit;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}
.ccc-cal-date span {
	font-size: 11px;
	text-transform: uppercase;
	color: var(--c-muted);
}

.ccc-cal-body { flex: 1 1 auto; min-width: 0; }
.ccc-cal-body h3 { overflow-wrap: anywhere; }
.ccc-cal-body h3 { margin: 2px 0 4px; font-size: 18px; }
.ccc-cal-meta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--c-muted);
}
.ccc-cal-go { color: var(--c-muted); font-size: 20px; }
.ccc-cal-locked { color: #8a6708; }

@media (max-width: 780px) {
	.ccc-cal-cell { min-height: 78px; padding: 5px; }
	.ccc-cal-chip { font-size: 0; padding: 0; height: 7px; border-radius: 4px; }
	.ccc-cal-title { font-size: 22px; }
}

/* ============================================================ SQUADY */

.squads {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.squad {
	background: #fff;
	border: 1px solid var(--line, #e1e8ed);
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: var(--shadow, 0 1px 2px rgba(22,33,42,.05));
}
.squad.is-full { background: #fbfcfd; border-color: #d7dfe5; }

.squad-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--line, #e1e8ed);
}

.squad-count {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted, #64798a);
	background: var(--bg-2, #f4f7f9);
	padding: 3px 9px;
	border-radius: 99px;
}
.squad-count.is-full { background: #fbe9ec; color: #c4344a; }

.squad-list {
	margin: 0;
	padding-left: 20px;
	font-size: 14px;
}
.squad-list li { margin-bottom: 5px; }
.squad-list small {
	display: block;
	color: var(--muted, #64798a);
	font-size: 12px;
}
.squad-empty { margin: 0; color: var(--muted, #64798a); font-size: 13.5px; }

/* prihlasovacie stránky */
.ccc-auth { max-width: 420px; margin: 0 auto; }

/* ============================================================ SPRÁVA KLUBU */

.ccc-admin {
	--a-line:  var(--line, #e1e8ed);
	--a-ink:   var(--ink, #16212a);
	--a-muted: var(--muted, #64798a);
	--a-blue:  var(--blue, #1684bf);
	--a-bg2:   var(--bg-2, #f4f7f9);
}

.ccc-admin-nav {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--a-line);
	margin-bottom: 26px;
	padding-bottom: 0;
}
.ccc-admin-nav a {
	padding: 11px 16px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--a-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.ccc-admin-nav a:hover { color: var(--a-ink); }
.ccc-admin-nav a.is-active { color: var(--a-blue); border-bottom-color: var(--a-blue); }

.ccc-admin-body h2 { font-size: 26px; margin: 0 0 14px; }
.ccc-admin-body h3 { font-size: 20px; margin: 22px 0 10px; }

.ccc-admin-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.ccc-admin-head h2 { margin: 0; }

/* karty na prehľade */
.ccc-admin-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	margin-bottom: 28px;
}
.ccc-admin-card {
	display: block;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--a-line);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: .15s;
}
.ccc-admin-card:hover { border-color: var(--a-blue); transform: translateY(-2px); }
.ccc-admin-card .n {
	display: block;
	font-family: "Barlow Condensed", inherit;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--a-muted);
}
.ccc-admin-card.has .n { color: var(--a-blue); }
.ccc-admin-card .l { font-size: 13.5px; color: var(--a-muted); }

/* riadkový zoznam */
.ccc-admin-list { display: grid; gap: 8px; }

.ccc-admin-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 13px 16px;
	background: #fff;
	border: 1px solid var(--a-line);
	border-radius: 11px;
}
.ccc-admin-row .grow { flex: 1; min-width: 200px; }
.ccc-admin-row small { color: var(--a-muted); }
.ccc-admin-acts { display: flex; gap: 6px; flex-wrap: wrap; }

.ccc-btn-sm { padding: 7px 13px !important; font-size: 13px !important; }

/* divízie */
.ccc-div-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 12px;
	margin-top: 10px;
}
.ccc-div-box {
	background: #fff;
	border: 1px solid var(--a-line);
	border-radius: 11px;
	padding: 13px 15px;
}
.ccc-div-box h4 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 8px;
	font-size: 16px;
}
.ccc-div-all { font-size: 11.5px; font-weight: 400; color: var(--a-muted); }
.ccc-div-all input { margin-right: 4px; }
.ccc-div-item {
	display: flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 0 4px !important;
	font-weight: 400 !important;
	font-size: 14px !important;
}
.ccc-div-item input { width: auto !important; margin: 0 !important; }

/* štartovka */
.ccc-sl-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	padding: 9px 0;
	border-bottom: 1px solid var(--a-line);
	font-size: 14px;
}
.ccc-sl-row:last-child { border-bottom: 0; }
.ccc-sl-row small { color: var(--a-muted); font-size: 12px; }
.ccc-sl-acts { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.ccc-sl-move select {
	padding: 6px 8px;
	font-size: 12.5px;
	border: 1px solid var(--line-2, #cfd9e0);
	border-radius: 7px;
	background: #fff;
}

/* galéria v správe */
.ccc-admin-gal {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin-top: 16px;
}
.ccc-admin-thumb {
	position: relative;
	border: 1px solid var(--a-line);
	border-radius: 9px;
	overflow: hidden;
	aspect-ratio: 1;
}
.ccc-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccc-admin-thumb form { position: absolute; top: 4px; right: 4px; }
.ccc-thumb-x {
	width: 24px; height: 24px;
	border: 0;
	border-radius: 50%;
	background: rgba(22,33,42,.75);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.ccc-thumb-x:hover { background: #c4344a; }

.ccc-upload { background: var(--a-bg2); padding: 14px 16px; border-radius: 11px; margin-bottom: 16px; }
.ccc-upload input[type=file] { font-size: 14px; }

.ccc-file-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ccc-file-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--a-line);
	font-size: 14px;
}

/* ============================================================ GALÉRIA */

.ccc-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.ccc-gallery a {
	display: block;
	aspect-ratio: 4/3;
	border-radius: 11px;
	overflow: hidden;
	border: 1px solid var(--line, #e1e8ed);
	background: var(--bg-2, #f4f7f9);
}
.ccc-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s;
}
.ccc-gallery a:hover img { transform: scale(1.05); }

.ccc-gallery-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}

/* =====================================================================
   FÁZA 1 — UX
   Pridané pri prepracovaní profilu, registrácie, kalendára a mobilu.
   ===================================================================== */

/* --- Dotykové plochy ------------------------------------------------
   Palec nie je kurzor. Norma je 44 × 44 px; všetko klikacie ju musí
   splniť, inak sa do toho na telefóne nedá trafiť. */
.ccc-btn,
.btn,
.ccc-seg-btn,
.ccc-cal-nav,
.ccc-cal-today,
.ccc-squad-card,
.ccc-quick-card,
.ccc-priority,
.doc-link {
	min-height: 44px;
}

.ccc-btn-sm {
	min-height: 44px;
	padding: 6px 14px;
}

/* --- Odznaky: ikona + text, nikdy len farba ------------------------ */
.ccc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.ccc-badge.is-paid,
.ccc-badge.is-open {
	background: #e8f6ee;
	color: #12693c;
}

.ccc-badge.is-unpaid {
	background: #fdeaea;
	color: #a41d1d;
}

.ccc-badge.is-wait {
	background: #fff4e0;
	color: #8a5300;
}

.ccc-badge.is-off {
	background: #eef1f4;
	color: #52616f;
}

.ccc-badge.is-info {
	background: #e9f1fb;
	color: #17457f;
}

/* --- Uvítanie ------------------------------------------------------- */
.ccc-hello {
	margin: 0 0 20px;
}

.ccc-hello h2 {
	margin: 0 0 8px;
	font-size: 30px;
}

.ccc-hello p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.ccc-hello-meta {
	color: var(--muted, #6b7785);
	font-size: 14px;
}

/* --- Jedna prioritná výzva ------------------------------------------
   Jedna. Tri rovnako červené boxy naučia človeka ignorovať všetky tri. */
.ccc-priority {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	margin-bottom: 22px;
	border: 1px solid #f0c9c9;
	border-left: 5px solid #c0392b;
	border-radius: 12px;
	background: #fdf4f3;
	color: inherit;
	text-decoration: none;
}

.ccc-priority.is-late {
	border-left-color: #a41d1d;
	background: #fdeaea;
}

.ccc-priority.is-info {
	border-color: #f2ddb5;
	border-left-color: #d79a1e;
	background: #fffaf0;
}

.ccc-priority.is-ok {
	border-color: #cfe9d9;
	border-left-color: #1e9a5a;
	background: #f2fbf6;
}

.ccc-priority-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	font-size: 20px;
	font-weight: 800;
}

.ccc-priority-body {
	display: block;
	flex: 1;
}

.ccc-priority-body strong {
	display: block;
	font-size: 17px;
	margin-bottom: 2px;
}

.ccc-priority-body span {
	color: var(--muted, #6b7785);
	font-size: 14px;
}

.ccc-priority-go {
	font-size: 20px;
	color: var(--muted, #6b7785);
}

/* --- Rýchle karty ---------------------------------------------------- */
.ccc-quick {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 30px;
}

.ccc-quick-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	border: 1px solid var(--line, #e1e8ed);
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, transform .15s;
}

.ccc-quick-card:hover {
	border-color: #b9c6d1;
	transform: translateY(-2px);
}

.ccc-quick-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted, #6b7785);
}

.ccc-quick-value {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
}

.ccc-quick-value.is-small {
	font-size: 17px;
}

.ccc-quick-value.is-bad {
	color: #a41d1d;
}

.ccc-quick-value.is-good {
	color: #12693c;
}

.ccc-quick-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--muted, #6b7785);
}

.ccc-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 8px;
}

.ccc-dot.is-good { background: #1e9a5a; }
.ccc-dot.is-warn { background: #d79a1e; }
.ccc-dot.is-bad  { background: #c0392b; }

.ccc-bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #eef1f4;
	overflow: hidden;
}

.ccc-bar i {
	display: block;
	height: 100%;
	background: #1e9a5a;
}

/* --- Moje preteky ---------------------------------------------------- */
.ccc-mymatches {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 22px;
}

.ccc-mymatch {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--line, #e1e8ed);
	border-radius: 12px;
	background: #fff;
}

.ccc-mymatch.is-past {
	opacity: .62;
}

.ccc-mymatch-date {
	flex: 0 0 54px;
	text-align: center;
	line-height: 1.1;
}

.ccc-mymatch-date b {
	display: block;
	font-size: 24px;
	font-weight: 800;
}

.ccc-mymatch-date span {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--muted, #6b7785);
}

.ccc-mymatch-body {
	flex: 1;
	min-width: 0;
}

.ccc-mymatch-body h4 {
	margin: 0 0 4px;
	font-size: 17px;
}

.ccc-mymatch-body h4 a {
	color: inherit;
	text-decoration: none;
}

.ccc-mymatch-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 13px;
	color: var(--muted, #6b7785);
}

.ccc-mymatch-state {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.ccc-history {
	margin-bottom: 26px;
}

.ccc-history summary {
	cursor: pointer;
	padding: 10px 0;
	font-weight: 700;
	color: var(--muted, #6b7785);
}

/* --- Registračný formulár: 3 sekcie ---------------------------------- */
.ccc-step {
	padding: 18px 0;
	border-top: 1px solid var(--line, #e1e8ed);
}

.ccc-step:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.ccc-step-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 17px;
}

.ccc-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ink, #16212b);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
}

.ccc-kept {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fffaf0;
	color: #8a5300;
	font-size: 14px;
}

.ccc-field-err {
	display: block;
	margin-top: 4px;
	color: #a41d1d;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
}

.ccc-field-err-block {
	margin-bottom: 10px;
}

label.has-error input,
label.has-error select {
	border-color: #c0392b;
}

/* --- Squady ako karty ------------------------------------------------ */
.ccc-squad-pick {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}

.ccc-squad-card {
	position: relative;
	display: block;
	padding: 12px 14px;
	border: 2px solid var(--line, #e1e8ed);
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
}

.ccc-squad-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ccc-squad-card:has(input:checked) {
	border-color: var(--ink, #16212b);
	background: #f7f9fb;
}

.ccc-squad-card.is-full {
	opacity: .55;
	cursor: not-allowed;
	background: #f5f6f8;
}

.ccc-squad-body {
	display: block;
}

.ccc-squad-name {
	display: block;
	font-weight: 800;
	margin-bottom: 2px;
}

.ccc-squad-cnt {
	display: block;
	font-size: 13px;
	color: var(--muted, #6b7785);
}

.ccc-squad-cnt.is-full {
	color: #a41d1d;
	font-weight: 700;
}

.ccc-squad-who {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--muted, #6b7785);
	line-height: 1.5;
}

/* --- Stavové oznamy (ikona + text) ----------------------------------- */
.ccc-state {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.6;
}

.ccc-state-icon {
	flex: 0 0 auto;
	font-size: 18px;
}

.ccc-state-warn {
	margin-top: 14px;
	background: #fffaf0;
	color: #6b4a08;
	border: 1px solid #f2ddb5;
}

.ccc-state-off {
	background: #eef1f4;
	color: #40505e;
	border: 1px solid var(--line, #e1e8ed);
}

/* --- Odoslanie ------------------------------------------------------- */
.ccc-submit {
	margin-top: 20px;
}

.ccc-submit-btn.is-busy {
	opacity: .6;
	cursor: progress;
}

/* --- Obrazovka po registrácii ---------------------------------------- */
.ccc-done-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px;
	border-radius: 14px;
	margin-bottom: 24px;
}

.ccc-done-head.is-ok {
	background: #f2fbf6;
	border: 1px solid #cfe9d9;
}

.ccc-done-head.is-wait {
	background: #fffaf0;
	border: 1px solid #f2ddb5;
}

.ccc-done-icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	font-size: 24px;
}

.ccc-done-head h2 {
	margin: 0 0 6px;
	font-size: 26px;
}

.ccc-done-head p {
	margin: 0;
	color: var(--muted, #6b7785);
}

.ccc-done-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ccc-done-amount {
	font-size: 34px;
	font-weight: 800;
	margin-bottom: 12px;
}

.ccc-done-bank code {
	font-size: 14px;
}

.ccc-done-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

/* --- Kalendár: prepínače --------------------------------------------- */
.ccc-cal-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin-bottom: 16px;
}

.ccc-seg {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--line, #e1e8ed);
	border-radius: 10px;
	background: #f5f7f9;
}

.ccc-seg-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--muted, #6b7785);
	text-decoration: none;
}

.ccc-seg-btn.is-on {
	background: #fff;
	color: var(--ink, #16212b);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.ccc-cal-locked {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #f5f7f9;
	color: var(--muted, #6b7785);
	font-size: 14px;
}

/* --- Kalendár: mriežka ----------------------------------------------- */
.ccc-cal-cell.is-past {
	background: #fafbfc;
}

.ccc-cal-cell.is-past .ccc-cal-num,
.ccc-cal-cell.is-past .ccc-cal-chip {
	opacity: .55;
}

.ccc-cal-chip {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 0;
	overflow: hidden;
}

.ccc-chip-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ccc-cal-more {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 700;
	color: var(--muted, #6b7785);
	text-decoration: none;
}

.ccc-cal-more:hover {
	text-decoration: underline;
}

.ccc-cal-agenda-h {
	margin: 30px 0 14px;
}

.ccc-cal-item.is-past {
	opacity: .6;
}

.ccc-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* --- Titulka: najbližší pretek ---------------------------------------- */
.next-match {
	display: flex;
	gap: 24px;
	padding: 24px;
	border: 1px solid var(--line, #e1e8ed);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(16, 32, 48, .06);
}

.next-date {
	flex: 0 0 96px;
	text-align: center;
	padding: 14px 0;
	border-radius: 12px;
	background: var(--ink, #16212b);
	color: #fff;
	align-self: flex-start;
	line-height: 1.15;
}

.next-date b {
	display: block;
	font-size: 40px;
	font-weight: 800;
}

.next-date span {
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.next-date i {
	display: block;
	font-size: 12px;
	font-style: normal;
	opacity: .7;
}

.next-body {
	flex: 1;
	min-width: 0;
}

.next-body h3 {
	margin: 0 0 10px;
	font-size: 28px;
}

.next-body h3 a {
	color: inherit;
	text-decoration: none;
}

.next-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 14px;
	margin: 18px 0;
}

.next-facts div {
	margin: 0;
}

.next-facts dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted, #6b7785);
	margin-bottom: 3px;
}

.next-facts dd {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.next-fill {
	margin-bottom: 16px;
}

.next-fill-bar {
	height: 8px;
	border-radius: 999px;
	background: #eef1f4;
	overflow: hidden;
	margin-bottom: 6px;
}

.next-fill-bar i {
	display: block;
	height: 100%;
	background: var(--ink, #16212b);
}

.next-fill-txt {
	font-size: 13px;
	color: var(--muted, #6b7785);
}

.next-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* --- Video fasáda ------------------------------------------------------
   Iframe vznikne až po kliknutí. Kým naň nikto neklikne, YouTube sa
   nenačíta — žiadne skripty, žiadne cookies, o 1 MB menej. */
.video-facade {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	aspect-ratio: 16 / 9;
}

.video-facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .82;
}

.video-facade iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.video-play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font: inherit;
}

.video-play-icon {
	width: 74px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: #16212b;
	font-size: 26px;
	padding-left: 5px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
	transition: transform .15s;
}

.video-play:hover .video-play-icon {
	transform: scale(1.07);
}

.video-play-txt {
	font-weight: 800;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.video-note {
	position: absolute;
	left: 14px;
	bottom: 12px;
	font-size: 12px;
	color: rgba(255, 255, 255, .82);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

.video-facade.is-playing .video-note {
	display: none;
}

/* --- Detail preteku: kľúčové údaje ------------------------------------ */
.hero-badge {
	margin-top: 12px;
}

.key-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 18px;
	margin: 0 0 30px;
	padding: 20px 22px;
	border: 1px solid var(--line, #e1e8ed);
	border-radius: 14px;
	background: #f8fafb;
}

.key-facts div {
	margin: 0;
}

.key-facts dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted, #6b7785);
	margin-bottom: 4px;
}

.key-facts dd {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
}

.key-facts dd small {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--muted, #6b7785);
}

.sec-h {
	margin: 40px 0 16px;
	font-size: 30px;
	text-transform: uppercase;
}

.sec-h3 {
	margin: 24px 0 12px;
	font-size: 22px;
}

.sec-h3-note {
	font-weight: 400;
	font-size: 16px;
	color: var(--muted, #6b7785);
}

/* Panel drží krok so scrollom — dlhý popis vpravo neuteká preč. */
@media (min-width: 981px) {
	.ccc-side {
		position: sticky;
		top: 90px;
		align-self: start;
	}
}

/* --- Dokumenty -------------------------------------------------------- */
.doc-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--line, #e1e8ed);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
}

.doc-link:hover {
	border-color: #b9c6d1;
	background: #f8fafb;
}

.doc-icon {
	font-size: 20px;
}

.doc-body {
	flex: 1;
	min-width: 0;
}

.doc-name {
	display: block;
	font-weight: 700;
}

.doc-meta {
	color: var(--muted, #6b7785);
	font-size: 12px;
}

.doc-go {
	color: var(--muted, #6b7785);
}

/* --- Lepivá výzva na mobile ------------------------------------------- */
.ccc-sticky-cta {
	display: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* =====================================================================
   MOBIL
   Testované na 360 / 390 / 430 px.
   ===================================================================== */

@media (max-width: 980px) {
	.ccc-quick {
		grid-template-columns: repeat(2, 1fr);
	}

	.ccc-done-grid {
		grid-template-columns: 1fr;
	}

	.next-match {
		flex-direction: column;
	}

	.next-date {
		flex: 0 0 auto;
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 8px;
		padding: 10px 16px;
	}

	.next-date b {
		font-size: 26px;
	}
}

@media (max-width: 720px) {
	/* Mriežka na telefóne nie je kalendár, je to hlavolam. Preč s ňou —
	   agenda pod ňou má všetko, čo mriežka len naznačovala. */
	.ccc-cal-grid {
		display: none;
	}

	.ccc-cal-tools {
		flex-direction: column;
	}

	/* Šesť filtrov sa do 390 px v jednom rade nezmestí. Doteraz posledné dva
	   jednoducho vytiekli za okraj — a tlačidlo, ktoré nevidno, neexistuje.
	   Nech sa teda zalomia do druhého riadku; skrolovací pás by ich schoval
	   rovnako, len elegantnejšie. */
	.ccc-seg {
		width: 100%;
		flex-wrap: wrap;
	}

	.ccc-seg-btn {
		flex: 1 0 30%;
		justify-content: center;
	}

	.ccc-cal-scope {
		margin-top: 0;
	}

	.ccc-hello h2 {
		font-size: 24px;
	}

	.ccc-mymatch {
		flex-wrap: wrap;
	}

	.ccc-mymatch-state {
		align-items: flex-start;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.ccc-squad-pick {
		grid-template-columns: 1fr;
	}

	.ccc-priority {
		align-items: flex-start;
	}

	.ccc-priority-go {
		display: none;
	}

	/* Prihlásenie je vždy na dosah palca. */
	.ccc-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: block;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .97);
		border-top: 1px solid var(--line, #e1e8ed);
		box-shadow: 0 -4px 20px rgba(16, 32, 48, .1);
		transition: transform .2s;
	}

	.ccc-sticky-cta.is-hidden {
		transform: translateY(110%);
	}

	.ccc-sticky-in {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.ccc-sticky-txt {
		font-size: 18px;
		font-weight: 800;
		line-height: 1.2;
	}

	.ccc-sticky-txt small {
		display: block;
		font-size: 12px;
		font-weight: 400;
		color: var(--muted, #6b7785);
	}

	.ccc-sticky-cta .btn {
		flex: 0 0 auto;
	}

	/* Aby lepivá lišta neprekryla koniec stránky. */
	.site-footer {
		padding-bottom: 90px;
	}
}

@media (max-width: 430px) {
	.ccc-quick {
		grid-template-columns: 1fr;
	}

	.key-facts,
	.next-facts {
		grid-template-columns: 1fr 1fr;
	}
}

/* =====================================================================
   SPRÁVA KLUBU — dashboard (Fáza 1, etapa 5)
   ===================================================================== */

.ccc-admin-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ccc-admin-head h2 {
	margin: 0;
}

.ccc-admin-who {
	margin: 4px 0 0;
	color: var(--muted, #6b7785);
	font-size: 14px;
}

.ccc-admin-h3row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 30px 0 14px;
}

.ccc-admin-h3row h3 {
	margin: 0;
}

/* --- Financie --------------------------------------------------------- */
.ccc-fin {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 10px;
}

.ccc-fin-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--line, #e1e8ed);
	border-left: 4px solid #b9c6d1;
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
}

.ccc-fin-card.is-bad {
	border-left-color: #c0392b;
	background: #fdf4f3;
}

.ccc-fin-card.is-good {
	border-left-color: #1e9a5a;
}

.ccc-fin-card .l {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--muted, #6b7785);
}

.ccc-fin-card .n {
	font-size: 26px;
	font-weight: 800;
}

.ccc-fin-card .s {
	font-size: 13px;
	color: var(--muted, #6b7785);
}

/* --- Moje najbližšie preteky ------------------------------------------ */
.ccc-dash-matches {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ccc-dash-match {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--line, #e1e8ed);
	border-radius: 12px;
	background: #fff;
}

.ccc-dash-date {
	flex: 0 0 52px;
	text-align: center;
	line-height: 1.1;
}

.ccc-dash-date b {
	display: block;
	font-size: 23px;
	font-weight: 800;
}

.ccc-dash-date span {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--muted, #6b7785);
}

.ccc-dash-body {
	flex: 1;
	min-width: 0;
}

.ccc-dash-body h4 {
	margin: 0 0 5px;
	font-size: 17px;
}

.ccc-dash-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 13px;
	color: var(--muted, #6b7785);
}

.ccc-dash-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --- Hľadanie ---------------------------------------------------------- */
.ccc-search {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.ccc-search input[type="search"] {
	flex: 1;
	min-width: 200px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--line, #e1e8ed);
	border-radius: 8px;
	font: inherit;
}

/* =====================================================================
   SPRÁVA NA MOBILE
   Tabuľka so šiestimi stĺpcami sa na 390 px zobraziť nedá. Namiesto
   vodorovného posúvania z každého riadku spravíme kartu — hlavičku
   stĺpca nesie data-label.
   ===================================================================== */

@media (max-width: 780px) {
	.ccc-fin {
		grid-template-columns: 1fr;
	}

	.ccc-dash-match,
	.ccc-admin-row {
		flex-wrap: wrap;
	}

	.ccc-dash-acts {
		width: 100%;
	}

	.ccc-dash-acts .ccc-btn {
		flex: 1;
		justify-content: center;
		text-align: center;
	}

	.ccc-table thead {
		display: none;
	}

	.ccc-table,
	.ccc-table tbody,
	.ccc-table tr,
	.ccc-table td {
		display: block;
		width: 100%;
	}

	.ccc-table tr {
		margin-bottom: 12px;
		padding: 12px 14px;
		border: 1px solid var(--line, #e1e8ed);
		border-radius: 12px;
		background: #fff;
	}

	.ccc-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 6px 0;
		border: 0;
		text-align: right;
	}

	.ccc-table td::before {
		content: attr(data-label);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--muted, #6b7785);
		text-align: left;
	}

	.ccc-table td:empty {
		display: none;
	}
}

/* --- Prvé spustenie: členský profil predsedu ------------------------- */
.ccc-setup {
	padding: 20px 22px;
	margin-bottom: 30px;
	border: 1px solid var(--line, #e1e8ed);
	border-left: 4px solid #d79a1e;
	border-radius: 12px;
	background: #fffdf7;
}

.ccc-setup h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	flex-wrap: wrap;
}

.ccc-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 16px;
	font-size: 14px;
	line-height: 1.6;
}

.ccc-check input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

/* =====================================================================
   FARBY GLOBÁLNE
   Pôvodne boli premenné definované len na hŕstke blokov (.ccc-form,
   .ccc-match…). Správa klubu medzi nimi nebola — a tak tam každé
   `background: var(--c-blue)` skončilo ako priehľadné: biele písmo na
   bielom pozadí. Tlačidlo „Nastaviť" sa jednoducho nedalo prečítať.
   Premenné preto patria na :root, nie na zoznam vyvolených.
   ===================================================================== */

:root {
	--c-line:    var(--line, #e1e8ed);
	--c-line-2:  var(--line-2, #cfd9e0);
	--c-ink:     var(--ink, #16212a);
	--c-muted:   var(--muted, #64798a);
	--c-blue:    var(--blue, #1684bf);
	--c-blue-hi: var(--blue-hi, #1071a6);
	--c-gold:    var(--gold, #d9a215);
	--c-green:   var(--green, #1e8a5f);
	--c-red:     var(--red, #c4344a);
	--c-bg2:     var(--bg-2, #f4f7f9);
	--c-radius:  var(--radius, 14px);
	--c-shadow:  var(--shadow, 0 1px 2px rgba(22, 33, 42, .05), 0 6px 20px rgba(22, 33, 42, .06));
}

/* A pás istoty: aj keby premenná niekde chýbala, tlačidlo ostane čitateľné. */
.ccc-btn {
	background: var(--c-blue, #1684bf);
	color: #fff;
	text-decoration: none;
}

.ccc-btn:hover,
.ccc-btn:focus {
	background: var(--c-blue-hi, #1071a6);
	color: #fff;
}

.ccc-btn-ghost,
.ccc-btn-ghost:hover,
.ccc-btn-ghost:focus {
	background: #fff;
	color: var(--c-ink, #16212a);
	border: 1px solid var(--c-line-2, #cfd9e0);
}

/* Vo výzve je tlačidlo vpravo a nesmie sa stratiť. */
.ccc-priority .ccc-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Rozhovor so SMTP serverom — surový, presne ako prišiel. */
.ccc-log {
	max-height: 320px;
	overflow: auto;
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 10px;
	background: #16212a;
	color: #d7e2ea;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

/* =====================================================================
   VÝSLEDKY A ARCHÍV
   ===================================================================== */

/* Jedno tlačidlo. Strelca nezaujíma, či je za ním PDF alebo PractiScore —
   šípka mu povie len to, či sa to stiahne, alebo ho to odvedie preč. */
.btn-results {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-results-icon {
	font-size: 15px;
	opacity: .85;
}

.ccc-archive .ccc-cal-item {
	cursor: default;
}

.ccc-cal-item.is-archive {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.ccc-cal-item.is-archive .ccc-cal-date i {
	display: block;
	font-size: 11px;
	font-style: normal;
	color: var(--c-muted, #64798a);
}

.ccc-cal-item.is-archive h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

.ccc-cal-item.is-archive h3 a {
	color: inherit;
	text-decoration: none;
}

.ccc-cal-item.is-archive h3 a:hover {
	text-decoration: underline;
}

.ccc-archive-act {
	flex: 0 0 auto;
	text-align: right;
}

/* Odstránení strelci — kôš. Tlmene, ale nie neviditeľne: sú to ľudia,
   ktorých niekto omylom vyhodil, a musí ich nájsť. */
.ccc-sl-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--c-line, #e1e8ed);
}

.ccc-sl-row:last-child {
	border-bottom: 0;
}

.ccc-sl-acts {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* =====================================================================
   ROČNÁ KONTROLA ÚDAJOV
   Nie je to vyskakovacie okno. Vyskakovacie okno je vec, ktorú ľudia
   zatvárajú. Toto je stránka, cez ktorú sa nedá prejsť — a každý riadok
   sa odklikáva zvlášť, lebo jedno tlačidlo „všetko sedí“ by nikto
   nečítal.
   ===================================================================== */

.ccc-check-row {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--c-line, #e1e8ed);
}

.ccc-check-field {
	flex: 1;
	min-width: 0;
}

.ccc-check-label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
}

.ccc-check-ok {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--c-line-2, #cfd9e0);
	border-radius: 9px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.ccc-check-ok input {
	width: 18px;
	height: 18px;
}

.ccc-check-ok:has(input:checked) {
	border-color: #1e9a5a;
	background: #f2fbf6;
	color: #12693c;
}

.ccc-btn-block {
	display: flex;
	width: 100%;
	margin-top: 18px;
}

/* =====================================================================
   ÚČASŤ — PRÍDE / NEPRÍDE
   ===================================================================== */

.ccc-rsvp {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.ccc-rsvp form {
	margin: 0;
}

.ccc-btn.is-chosen {
	background: #1e9a5a;
	color: #fff;
}

.ccc-btn.is-chosen:hover {
	background: #17784a;
}

.ccc-rsvp-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}

.ccc-rsvp-item {
	display: flex;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 12px;
	background: #fff;
}

/* Nezodpovedané nesmie splynúť s pozadím — presne to má človek vidieť. */
.ccc-rsvp-item.is-waiting {
	border-left: 5px solid #d79a1e;
	background: #fffdf7;
}

.ccc-rsvp-body {
	flex: 1;
	min-width: 0;
}

.ccc-rsvp-body h4 {
	margin: 6px 0 4px;
	font-size: 17px;
}

.ccc-rsvp-body h4 a {
	color: inherit;
	text-decoration: none;
}

.ccc-rsvp-ask {
	margin: 8px 0 0;
	color: #8a5300;
	font-size: 14px;
	font-weight: 600;
}

.ccc-tag.is-meeting {
	background: #eef2ff;
	color: #3730a3;
}

/* --- prehľad pre predsedu -------------------------------------------- */
.ccc-attend {
	padding: 16px 18px;
	margin-bottom: 14px;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 12px;
	background: #fff;
}

.ccc-attend-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.ccc-attend-head h3 {
	margin: 6px 0 2px;
	font-size: 18px;
}

.ccc-attend-nums {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 14px 0 10px;
	text-align: center;
}

.ccc-attend-nums b {
	display: block;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
}

.ccc-attend-nums span {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--c-muted, #64798a);
}

.ccc-attend-nums .is-yes b    { color: #12693c; }
.ccc-attend-nums .is-no b     { color: #a41d1d; }
.ccc-attend-nums .is-silent b { color: #8a5300; }

@media (max-width: 640px) {
	.ccc-check-row {
		flex-direction: column;
		align-items: stretch;
	}

	.ccc-check-ok {
		justify-content: center;
	}

	.ccc-rsvp-item {
		flex-direction: column;
	}

	.ccc-rsvp .ccc-btn {
		flex: 1;
		justify-content: center;
	}
}

/* =====================================================================
   GALÉRIA — ALBUMY
   Jedna nekonečná stránka fotiek je použiteľná pri dvadsiatich a
   nepoužiteľná pri dvetisíc. Preto albumy.
   ===================================================================== */

.ccc-albums {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}

.ccc-album {
	display: block;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform .15s, border-color .15s;
}

.ccc-album:hover {
	transform: translateY(-2px);
	border-color: #b9c6d1;
}

.ccc-album-img {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #eef1f4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccc-album-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ccc-album-empty {
	color: var(--c-muted, #64798a);
	font-size: 13px;
}

.ccc-album-body {
	padding: 12px 14px;
}

.ccc-album-body h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

.ccc-new-album {
	padding: 12px 14px;
	margin: 6px 0 12px;
	border-left: 3px solid var(--c-line-2, #cfd9e0);
	background: #f8fafb;
	border-radius: 0 8px 8px 0;
}

/* Fotka, ktorá čaká na schválenie — jej autor ju vidí, nikto iný. */
.ccc-gallery.is-pending a {
	position: relative;
	opacity: .75;
}

.ccc-pending-tag {
	position: absolute;
	left: 8px;
	top: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	background: #d79a1e;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.ccc-admin-gal {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}

.ccc-admin-thumb {
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.ccc-admin-thumb img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.ccc-thumb-meta {
	padding: 8px 10px 0;
	color: var(--c-muted, #64798a);
	line-height: 1.4;
}

.ccc-thumb-acts {
	display: flex;
	gap: 6px;
	padding: 8px 10px 10px;
}

.ccc-thumb-acts .ccc-btn {
	flex: 1;
	justify-content: center;
	padding: 8px 6px;
	font-size: 13px;
}

/* ====================================================================
   Kalendár: rok v zozname, druhy udalostí, časové pásma
   ==================================================================== */

/* Výcvik PZ. Nie je to brigáda ani pretek, tak nesmie vyzerať ako ony —
   modrá, ako každý iný oznam. Ikona nesie význam, nie iba farba. */
.ccc-cal-chip.is-training,
.ccc-tag.is-training {
	background: #e7f0fb;
	color: #14477d;
}

.ccc-cal-chip.is-training:hover {
	background: #14477d;
	color: #fff;
}

.ccc-cal-item.is-training {
	border-left-color: #2f6fb3;
	background: #f7fafd;
}

.ccc-cal-chip.is-meeting {
	background: #eef2ff;
	color: #3730a3;
}

.ccc-cal-chip.is-meeting:hover {
	background: #3730a3;
	color: #fff;
}

.ccc-cal-item.is-meeting {
	border-left-color: #4f46e5;
	background: #fafaff;
}

/* Výber roka v zozname. */
.ccc-cal-years select {
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-weight: 600;
	color: var(--c-ink, #16202a);
	cursor: pointer;
}

/* Mesiac ako predel v ročnom zozname — bez neho je to stena riadkov. */
.ccc-cal-month-h {
	margin: 22px 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--c-line, #e1e8ed);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c-muted, #66788a);
}

.ccc-cal-month-h:first-child {
	margin-top: 4px;
}

/* Mesiac pri dátume, keď zoznam preskakuje celý rok. */
.ccc-cal-date i {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: var(--c-muted, #66788a);
}

/* Časové pásma. */
.ccc-cal-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.ccc-slot {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid #cddff1;
	border-radius: 999px;
	background: #f2f7fc;
	font-size: 13px;
	font-weight: 600;
	color: #14477d;
	white-space: nowrap;
}

.ccc-slot i {
	font-style: normal;
	font-weight: 500;
	color: #4b6c8e;
}

.ccc-slot.is-more {
	background: #fff;
	color: var(--c-muted, #66788a);
	border-style: dashed;
}

.ccc-slot-table td,
.ccc-slot-table th {
	text-align: left;
}

/* Formulár: riadky pásiem. Na mobile pod seba — tri políčka vedľa seba
   v 360 px sú tri nepoužiteľné políčka. */
.ccc-slots {
	margin: 18px 0;
	padding: 14px 16px;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 12px;
	background: #fbfcfd;
}

.ccc-slots legend {
	padding: 0 6px;
	font-weight: 700;
	font-size: 15px;
}

.ccc-slot-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

/* Formulár inde dáva vstupom width:100 %, čo tu roztiahne políčko času cez celý
   riadok. Preto explicitná šírka, nie iba flex. */
.ccc-slot-row input[type="time"] {
	flex: 0 0 130px;
	width: 130px;
	min-width: 0;
	min-height: 44px;
	margin: 0;
}

.ccc-slot-row input[type="text"] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	min-height: 44px;
	margin: 0;
}

.ccc-slots,
.ccc-slot-row {
	min-width: 0;
}

@media ( max-width: 560px ) {
	.ccc-slot-row {
		flex-wrap: wrap;
	}

	.ccc-slot-row input[type="text"] {
		flex: 1 0 100%;
	}
}

/* ====================================================================
   Lightbox
   ==================================================================== */

body.ccc-lb-open {
	overflow: hidden;
}

.ccc-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 8, 14, 20, .93 );
}

.ccc-lb[hidden] {
	display: none;
}

.ccc-lb-fig {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.ccc-lb-img {
	max-width: min( 1200px, 92vw );
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, .5 );
	background: #0d151d;
}

.ccc-lb.is-loading .ccc-lb-img {
	opacity: 0;
}

.ccc-lb-spin {
	display: none;
	position: absolute;
	width: 34px;
	height: 34px;
	border: 3px solid rgba( 255, 255, 255, .25 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: ccc-lb-spin 0.8s linear infinite;
}

.ccc-lb.is-loading .ccc-lb-spin {
	display: block;
}

@keyframes ccc-lb-spin {
	to { transform: rotate( 360deg ); }
}

.ccc-lb-cap {
	color: #dbe6f0;
	font-size: 14px;
	text-align: center;
}

.ccc-lb-cap[hidden] {
	display: none;
}

.ccc-lb-count {
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX( -50% );
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .03em;
}

/* Tlačidlá. 48 px, lebo sa na ne klikne palcom v rukavici. */
.ccc-lb-x,
.ccc-lb-nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.ccc-lb-x:hover,
.ccc-lb-nav:hover,
.ccc-lb-x:focus-visible,
.ccc-lb-nav:focus-visible {
	background: rgba( 255, 255, 255, .28 );
	outline: none;
}

.ccc-lb-x {
	top: 14px;
	right: 16px;
	font-size: 20px;
}

.ccc-lb-nav[hidden] {
	display: none;
}

.ccc-lb-prev { left: 16px; }
.ccc-lb-next { right: 16px; }

.ccc-lb-nav {
	top: 50%;
	transform: translateY( -50% );
	font-size: 32px;
	padding-bottom: 4px;
}

/* Na telefóne sa listuje prstom, tak šípky dole a menšie — nech nesedia
   uprostred fotky a nezavadzajú. */
@media ( max-width: 700px ) {
	.ccc-lb {
		padding: 12px;
	}

	.ccc-lb-img {
		max-height: 70vh;
	}

	.ccc-lb-nav {
		top: auto;
		bottom: 18px;
		transform: none;
	}

	.ccc-lb-prev { left: 22px; }
	.ccc-lb-next { right: 22px; }
}

/* Náhľady v albume: kurzor má napovedať, že sa fotka zväčší. */
.ccc-gallery a {
	cursor: zoom-in;
}

/* Prihlásenému užívateľovi WordPress lepí hore svoju lištu. Bez tohto by
   krížik a počítadlo skončili pod ňou — a zavrieť sa nedá to, na čo sa
   nedá kliknúť. */
body.admin-bar .ccc-lb {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar .ccc-lb {
		top: 46px;
	}
}

/* ====================================================================
   Chat: člen ↔ predseda
   ==================================================================== */

.ccc-chat-wrap.is-boss {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 16px;
	align-items: start;
}

/* Zoznam ľudí. Kto čaká na odpoveď, je hore a má bodku — inak sa na neho
   zabudne presne tak, ako sa zabúda na e-maily. */
.ccc-chat-people {
	max-height: 520px;
	overflow: auto;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 12px;
	background: #fff;
}

.ccc-chat-person {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	min-height: 56px;
	border-bottom: 1px solid var(--c-line, #e1e8ed);
	color: inherit;
	text-decoration: none;
}

.ccc-chat-person:last-child {
	border-bottom: 0;
}

.ccc-chat-person:hover {
	background: #f6f9fc;
}

.ccc-chat-person.is-on {
	background: #eef4fa;
	box-shadow: inset 3px 0 0 var(--c-blue, #2f6fb3);
}

.ccc-chat-ava {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #dbe6f0;
	color: #14477d;
	font-weight: 700;
}

.ccc-chat-ava img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ccc-chat-person-body {
	flex: 1;
	min-width: 0;
}

.ccc-chat-person-body strong {
	display: block;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ccc-chat-person-body small {
	color: var(--c-muted, #66788a);
	font-size: 12px;
}

.ccc-chat-dot {
	flex: 0 0 auto;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #c4344a;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccc-chat-head {
	padding: 10px 14px;
	border-bottom: 1px solid var(--c-line, #e1e8ed);
	background: #fbfcfd;
}

.ccc-chat-head strong {
	display: block;
	font-size: 16px;
}

.ccc-chat-head small {
	color: var(--c-muted, #66788a);
}

/* Na telefóne je zoznam ľudí nad chatom — dve stĺpce v 360 px nie sú dva
   stĺpce, sú dva nepoužiteľné pruhy. */
@media ( max-width: 860px ) {
	.ccc-chat-wrap.is-boss {
		grid-template-columns: 1fr;
	}

	.ccc-chat-people {
		max-height: 210px;
	}
}

/* ====================================================================
   Fotka člena
   ==================================================================== */

.ccc-face {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	display: block;
	background: #eef2f6;
}

.ccc-face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ccc-face.is-big {
	width: 120px;
	height: 120px;
	object-fit: cover;
}

.ccc-me {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 18px;
}

@media ( max-width: 560px ) {
	.ccc-me {
		flex-direction: column;
	}
}

/* Skupina polí (adresa) — nech je vidieť, že patria k sebe. */
.ccc-fieldset {
	margin: 18px 0;
	padding: 14px 16px;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 12px;
	background: #fbfcfd;
}

.ccc-fieldset legend {
	padding: 0 6px;
	font-weight: 700;
	font-size: 15px;
}

/* --- Návrh brigády mimo kalendára ------------------------------------ */
.ccc-claim-box {
	margin-top: 22px;
	padding: 16px 18px;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 12px;
	background: #fbfcfd;
}

.ccc-claim-box h4 {
	margin: 0 0 4px;
	font-size: 17px;
}

.ccc-claim-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.ccc-claim-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 8px 0;
	border-bottom: 1px solid var(--c-line, #e1e8ed);
}

.ccc-claim-list li:last-child {
	border-bottom: 0;
}

.ccc-claim-when {
	flex: 0 0 auto;
	font-weight: 700;
}

.ccc-claim-what {
	flex: 1;
	min-width: 0;
	color: var(--c-muted, #66788a);
}

/* --- Tréning na strelnici v kalendári -------------------------------- */
.ccc-cal-chip.is-range,
.ccc-tag.is-range {
	background: #f0e9fb;
	color: #4b2f86;
}

.ccc-cal-chip.is-range:hover {
	background: #4b2f86;
	color: #fff;
}

.ccc-cal-chip.is-range.is-waiting {
	border: 1px dashed #8a6708;
}

.ccc-cal-item.is-range {
	border-left-color: #7c5cc4;
	background: #fcfaff;
}

/* Čas priamo v čipe — meno bez času nič nehovorí. */
.ccc-cal-chip.is-range .ccc-chip-text i {
	font-style: normal;
	opacity: .75;
	margin-left: 4px;
}

/* --- Dva QR kódy vedľa seba ------------------------------------------ */
.ccc-qr-pair {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.ccc-qr-caption small {
	display: block;
	color: var(--c-muted, #66788a);
	font-weight: 500;
}

/* --- Údaje na ručný prevod ------------------------------------------- */
.ccc-pay-manual {
	margin-top: 10px;
	padding: 12px 14px;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 12px;
	background: #fbfcfd;
}

.ccc-pay-manual summary {
	cursor: pointer;
	font-weight: 700;
}

.ccc-pay-dl {
	margin: 10px 0 0;
}

.ccc-pay-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 7px 0;
	border-bottom: 1px solid var(--c-line, #e1e8ed);
}

.ccc-pay-row:last-child {
	border-bottom: 0;
}

.ccc-pay-row dt {
	flex: 0 0 170px;
	color: var(--c-muted, #66788a);
	font-size: 14px;
}

.ccc-pay-row dd {
	flex: 1;
	min-width: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ccc-pay-row dd span {
	font-weight: 700;
	word-break: break-word;
}

.ccc-copy {
	min-height: 32px;
	padding: 4px 10px;
	border: 1px solid var(--c-line, #e1e8ed);
	border-radius: 999px;
	background: #fff;
	color: var(--c-muted, #66788a);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.ccc-copy:hover {
	border-color: var(--c-blue, #2f6fb3);
	color: var(--c-blue, #2f6fb3);
}

.ccc-copy.is-done {
	border-color: #1e8a5f;
	color: #1e8a5f;
}

@media ( max-width: 560px ) {
	.ccc-pay-row dt {
		flex: 1 0 100%;
	}
}

/* --- Preteky iných klubov (prevzaté zo ShootingArea) -------------------- */

/* Cudzí pretek musí byť rozoznateľný skôr, než ho človek klikne. Nie farbou —
   sivý pruh vľavo a značka „Iný klub“; farba sama by nepovedala nič nikomu,
   kto ju nepozná (a strelcovi, ktorý farby nerozlišuje, vôbec nič). */
.ccc-cal-item.is-ext {
	border-left-color: #9aa7b1;
	background: #fbfcfd;
}

.ccc-cal-chip.is-ext {
	background: #eef1f4;
	color: #55636e;
}
.ccc-cal-chip.is-ext:hover {
	background: #55636e;
	color: #fff;
}

.ccc-tag.is-ext {
	background: #eef1f4;
	color: #55636e;
	margin-left: 6px;
}

/* --- Dosah kalendára (naše / východ / celé SR) -------------------------- */

.ccc-cal-scope {
	margin-top: -6px;
	align-items: center;
}

.ccc-cal-scope-note {
	margin: 0;
	font-size: 13.5px;
	color: var(--c-muted, #667);
}
.ccc-cal-scope-note a { color: inherit; }

.ccc-seg-scope .ccc-seg-btn.is-on {
	background: var(--c-navy, #16212a);
	color: #fff;
}

/* --- Import zo ShootingArea (v správe) ---------------------------------- */

.ccc-import {
	background: #f7f9fb;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 18px;
}
.ccc-import .ccc-form-row { align-items: end; gap: 18px; }
.ccc-import .ccc-check { font-weight: 400; }

/* --- Čestný člen --------------------------------------------------------- */

/* Zlatý odznak, nie zelený: „zaplatené“ a „čestný člen“ nie sú to isté a nemajú
   vyzerať rovnako. Hviezdička je tam preto, že farba sama nikomu nič nepovie. */
.ccc-badge.is-gold {
	background: #fdf3d6;
	color: #8a6708;
	border: 1px solid #eccf7a;
}

/* --- Fotka v mojom profile ---------------------------------------------- */
.ccc-me {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ccc-me-photo img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
	border: 1px solid var(--c-line);
}

.ccc-me-nophoto {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	border-radius: 12px;
	background: #eef1f4;
	color: #97a4ae;
	font-size: 30px;
	font-weight: 700;
}


/* --- História pretekov v kalendári -------------------------------------- */

/* Nie je to filter (tie hovoria ČO a ČIE), je to pohľad dozadu. Preto vyzerá
   ako tlačidlo a nie ako ďalšia záložka v páse — inak by si ju človek pomýlil
   s filtrom a čudoval sa, prečo mu „vypla“ preteky. */
.ccc-cal-history {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	background: #fff;
	color: var(--c-ink, #16212a);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: .15s;
}
.ccc-cal-history:hover { border-color: #b9c6d1; }
.ccc-cal-history.is-on {
	background: var(--c-navy, #16212a);
	border-color: var(--c-navy, #16212a);
	color: #fff;
}

@media (max-width: 720px) {
	.ccc-cal-history { width: 100%; justify-content: center; }
}


/* --- Chat: hľadanie a vedenie na prvom mieste ---------------------------- */

.ccc-chat-search {
	position: relative;
	padding: 10px;
	border-bottom: 1px solid var(--c-line);
	background: #fff;
}

.ccc-chat-search input {
	width: 100%;
	min-height: 40px;
	padding: 0 34px 0 12px;
	border: 1px solid var(--c-line);
	border-radius: 9px;
	font: inherit;
	background: #f7f9fb;
}

.ccc-chat-clear {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--c-muted, #66788a);
	text-decoration: none;
	font-size: 13px;
}

/* Predsedu a podpredsedu nehľadá nikto v abecede — sú hore a je to na nich vidieť. */
.ccc-chat-person.is-office { background: #fbfcfe; }

.ccc-chat-office {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #e6f2f9;
	color: #1071a6;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	vertical-align: middle;
}

.ccc-chat-ava {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: #eef1f4;
	color: #55636e;
	font-weight: 700;
}


/* Meno hore, funkcia a čas pod ním — v 200 px stĺpci sa vedľa seba nezmestia. */
.ccc-chat-person-body { min-width: 0; }
.ccc-chat-person-body strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ccc-chat-person-body small {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.ccc-chat-person-body small .ccc-chat-office { flex: 0 0 auto; margin-left: 0; }

/* --- Štartovné: cenník mimo panela kľúčových údajov --------------------- */

/* Cenník bol donedávna tabuľka vnútri mriežky s dátumom a miestom. Mriežka má
   stĺpce široké 130 px — tabuľka sa do nich nezmestila, roztiahla riadok do
   výšky a panel prestal byť prehľadom. Tu má vlastnú kartu a vlastnú šírku. */
.ccc-fees {
	margin: -12px 0 30px;
	padding: 18px 20px;
	border: 1px solid var(--line, #e1e8ed);
	border-radius: 14px;
	background: #fff;
}

.ccc-fees-h {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted, #6b7785);
}

.ccc-fees-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 8px 22px;
}

.ccc-fees-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--line, #e1e8ed);
}

.ccc-fees-list span { color: var(--ink, #16212a); }
.ccc-fees-list b { font-size: 17px; white-space: nowrap; }

.ccc-fees-note {
	margin: 12px 0 0;
	font-size: 13.5px;
	color: var(--muted, #6b7785);
}

/* --- Peniaze na preteku (sumár pre organizátora) ------------------------- */
.ccc-money {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin: 18px 0 10px;
}

.ccc-money-card {
	padding: 14px 16px;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	background: #f8fafb;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ccc-money-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-muted, #66788a);
}

.ccc-money-card strong { font-size: 22px; }
.ccc-money-card strong.is-good { color: #1e8a5f; }
.ccc-money-card strong.is-warn { color: #c4344a; }
.ccc-money-card small { color: var(--c-muted, #66788a); }

/* --- Súhlas so stanovami a poriadkom ------------------------------------ */

.ccc-consent {
	margin: 22px 0;
	padding: 18px 20px;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	background: #f8fafb;
}

.ccc-consent-h {
	margin: 0 0 6px;
	font-size: 16px;
}

.ccc-consent-note {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--c-muted, #66788a);
}

.ccc-consent-docs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.ccc-doc-open .ccc-doc-state { margin-right: 6px; }
.ccc-doc-open.is-read { border-color: #7cc0a0; color: #1e8a5f; }

/* Zamknuté políčko musí vyzerať zamknuto, inak človek klika a nechápe prečo. */
.ccc-check.is-locked { opacity: .55; cursor: not-allowed; }
.ccc-check.is-locked input { cursor: not-allowed; }

/* --- Náhľad dokumentu --------------------------------------------------- */

.ccc-doc-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(10, 18, 26, .72);
}

/* Atribút `hidden` hovorí „nezobrazuj“, ale `display: flex` vyššie ho prebije —
   prehliadač dá prednosť triede pred pravidlom pre [hidden]. Bez tohto riadku
   okno visí nad prihláškou stále, s večným „Načítavam…“, a formulár sa nedá ani
   vyplniť. Presne to sa aj stalo. */
.ccc-doc-modal[hidden] {
	display: none;
}

.ccc-doc-box {
	display: flex;
	flex-direction: column;
	width: min(860px, 100%);
	max-height: 90vh;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0,0,0,.4);
}

.ccc-doc-head,
.ccc-doc-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--c-line);
}

.ccc-doc-foot {
	border-bottom: 0;
	border-top: 1px solid var(--c-line);
	justify-content: flex-end;
	flex-wrap: wrap;
}

.ccc-doc-head strong { flex: 1; font-size: 17px; }

.ccc-doc-x {
	border: 0;
	background: transparent;
	font-size: 18px;
	cursor: pointer;
	color: var(--c-muted, #66788a);
	min-width: 44px;
	min-height: 44px;
}

.ccc-doc-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 22px;
	line-height: 1.62;
}

.ccc-doc-body h2 { font-size: 20px; margin: 22px 0 10px; }
.ccc-doc-body h3 { font-size: 17px; margin: 18px 0 8px; }
.ccc-doc-body p, .ccc-doc-body li { font-size: 15.5px; }

.ccc-doc-progress {
	margin-right: auto;
	font-size: 13.5px;
	color: var(--c-muted, #66788a);
}

.ccc-doc-progress.is-done { color: #1e8a5f; font-weight: 700; }


/* Zamknuté tlačidlo v náhľade dokumentu.
   Modré tlačidlo, na ktoré sa nedá kliknúť, je horšie než žiadne: človek naň
   klikne, nič sa nestane a nadáva na web. Nech je vidieť, že čaká na dočítanie. */
.ccc-doc-done[disabled],
.ccc-btn[disabled] {
	opacity: .45;
	cursor: not-allowed;
	filter: grayscale(.4);
}