/* FP Fitnes Poeni - stilovi za frontend widget i admin
 *
 * Frontend deo (.fp-widget) koristi Blocksy CSS promenljive za boje i tipografiju
 * (sa fallback vrednostima ako tema nije Blocksy ili promenljiva ne postoji),
 * tako da se automatski uklapa sa paletom i dugmadima podesenim u Customizeru:
 * Blocksy > Customize > Colors > Palette (--theme-palette-color-1 ... 8)
 * i Blocksy > Customize > Buttons (klasa .ct-button).
 */

.fp-widget {
	max-width: 480px;
	font-family: inherit;
	color: var(--theme-text-color, #32373c);
	line-height: 1.6;
}

.fp-balance-box {
	background: #16181d;
	color: #ffffff;
	border-radius: var(--theme-card-border-radius, 14px);
	padding: 26px 20px;
	text-align: center;
	margin-bottom: 16px;
}
.fp-balance-number {
	font-size: 3em;
	font-weight: 800;
	letter-spacing: .5px;
	color: #4ADE80;
	text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.fp-balance-label {
	color: #ffffff;
	opacity: .9;
	font-size: .95em;
}
.fp-progress {
	background: rgba(255,255,255,.2);
	border-radius: 10px;
	height: 10px;
	margin-top: 14px;
	overflow: hidden;
}
.fp-progress-bar {
	background: #4ADE80;
	height: 100%;
}
.fp-small { font-size: .8em; opacity: .75; margin-top: 4px; }
.fp-rate-note { margin-top: 10px; }
.fp-balance-box .fp-small { color: #ffffff; opacity: .8; }

.fp-next-badge {
	background: color-mix(in srgb, var(--theme-palette-color-1, #2b2b2b) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--theme-palette-color-1, #2b2b2b) 25%, transparent);
	padding: 10px 14px;
	border-radius: 10px;
	margin-bottom: 14px;
}

.fp-badges { margin-bottom: 18px; }
.fp-badge {
	display: inline-block;
	background: color-mix(in srgb, var(--theme-palette-color-1, #2b2b2b) 10%, transparent);
	border-radius: 20px;
	padding: 4px 12px;
	margin: 0 6px 6px 0;
	font-size: .9em;
}

.fp-widget h3 {
	font-family: inherit;
	margin: 1.4em 0 .6em;
}

.fp-list, .fp-rewards, .fp-history, .fp-leaderboard { list-style: none; margin: 0 0 20px; padding: 0; }
.fp-list li {
	padding: 8px 0;
	border-bottom: 1px solid rgba(0,0,0,.08);
	display: flex;
	justify-content: space-between;
}

.fp-rewards li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: 10px;
	margin-bottom: 8px;
	background: rgba(0,0,0,.03);
}
.fp-rewards li.fp-locked { opacity: .6; }
.fp-reward-name { flex: 1; }
.fp-reward-cost { font-weight: 600; margin: 0 10px; }
.fp-missing { font-size: .85em; opacity: .6; }

/* .ct-button = Blocksy-ina sopstvena klasa dugmeta, povlaci boju/radius/hover iz teme */
.fp-redeem-btn.ct-button {
	padding: 6px 16px;
	font-size: .9em;
	min-height: auto;
}
.fp-pending-badge {
	display: inline-block;
	background: #fff3cd;
	color: #856404;
	border: 1px solid #ffe08a;
	border-radius: 20px;
	padding: 5px 14px;
	font-size: .85em;
	font-weight: 600;
	white-space: nowrap;
}

.fp-history li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px dashed rgba(0,0,0,.08);
	font-size: .9em;
}
.fp-history-date { opacity: .6; min-width: 70px; }
.fp-history-reason { flex: 1; }

.fp-notice {
	background: color-mix(in srgb, var(--theme-palette-color-1, #2b2b2b) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--theme-palette-color-1, #2b2b2b) 25%, transparent);
	padding: 10px 14px;
	border-radius: 10px;
	margin-bottom: 16px;
}
.fp-notice-success { background: #e6f7e6; border-color: #b6e3b6; color: #1e4620; }
.fp-notice-error { background: #fdecea; border-color: #f3b7b0; color: #7a1f16; }
.fp-notice-warning { background: #fff8e1; border-color: #ffe08a; color: #6b4e00; }

/* Rang lista */
.fp-leaderboard-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	margin-bottom: 6px;
	background: rgba(0,0,0,.03);
}
.fp-leaderboard-row.fp-me {
	background: color-mix(in srgb, var(--theme-palette-color-1, #2b2b2b) 12%, transparent);
	font-weight: 600;
}
.fp-leaderboard-rank {
	width: 28px;
	text-align: center;
	opacity: .6;
	font-size: .9em;
}
.fp-leaderboard-name { flex: 1; }
.fp-leaderboard-badges { margin-left: 6px; }
.fp-leaderboard-badge-icon { font-size: .95em; margin-right: 2px; }
.fp-leaderboard-points {
	font-weight: 700;
	color: var(--theme-palette-color-1, inherit);
	text-align: right;
	white-space: nowrap;
}
.fp-leaderboard-sub {
	font-size: .78em;
	font-weight: 400;
	opacity: .6;
	margin-top: 2px;
}

/* Admin */
.fp-admin .fp-card {
	background: #fff;
	border: 1px solid #ddd;
	padding: 16px 20px;
	max-width: 520px;
	border-radius: 6px;
	margin-bottom: 24px;
}
.fp-admin .description { color: #666; font-size: .9em; }

/* Autocomplete pretraga korisnika (Dodela poena) */
.ui-autocomplete {
	position: absolute;
	z-index: 9999;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
	list-style: none;
	margin: 2px 0 0;
	padding: 4px 0;
	max-height: 260px;
	overflow-y: auto;
}
.ui-autocomplete .ui-menu-item {
	padding: 0;
}
.ui-autocomplete .ui-menu-item-wrapper {
	display: block;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 13px;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
	background: #2271b1;
	color: #fff;
	border: none;
	margin: 0;
}

/* Admin - editable row layout (zamena za nevalidne forme unutar <table>) */
.fp-row-table {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin-bottom: 10px;
	max-width: 900px;
}
.fp-row-table .fp-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid #eee;
	flex-wrap: wrap;
}
.fp-row-table .fp-row-head {
	background: #f6f7f7;
	font-weight: 600;
	font-size: .9em;
}
.fp-row-table .fp-cell { flex: 0 0 auto; }
.fp-row-table .fp-cell-grow { flex: 1 1 160px; }
.fp-row-table .fp-cell-actions { margin-left: auto; }
.fp-row-table .fp-row-delete {
	padding: 2px 12px 10px;
	border-bottom: 1px solid #eee;
	text-align: right;
}
.fp-row-table .fp-row-delete .button-link-delete {
	color: #b32d2e;
	font-size: .85em;
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
}
.fp-sortable-item { position: relative; }
.fp-sortable-item.ui-sortable-helper { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.fp-sortable-item-placeholder {
	height: 46px;
	margin-bottom: 2px;
	background: #f0f6fc;
	border: 2px dashed #8bb7d8;
	border-radius: 4px;
}
.fp-drag-handle { color: #999; font-size: 16px; user-select: none; }
.fp-drag-handle:hover { color: #333; }