/**
 * DENS Članstva — design žetoni.
 * Edino mesto v vtičniku, kjer smejo nastopati hex/rgb/hsl vrednosti.
 * Glej docs/design.md točka 3.1 za specifikacijo in razlago.
 */
:root {
	/* Layout */
	--dens-content-max-width: 120rem;
	--dens-gutter-mobile: 1.5rem;
	--dens-gutter-desktop: 3rem;
	--dens-section-py-min: 3rem;
	--dens-section-py-max: 8rem;

	/* Border radius lestvica */
	--dens-radius-sm: 3px;
	--dens-radius: 8px;        /* rounded-lg — vnosna polja */
	--dens-radius-panel: 12px; /* rounded-xl — kartice, zabojniki */
	--dens-radius-tile: 16px;  /* rounded-2xl — povzetek, tile kartice */
	--dens-radius-bento: 10px; /* admin bento kartice, canvas — poravnano med 8 in 12px */
	--dens-radius-pill: 1em;   /* rounded-full — gumbi, radio, checkbox krogi */

	/* Tipografija */
	--dens-font-heading: 'Plus Jakarta Sans', sans-serif;
	--dens-font-body: 'Inter', sans-serif;
	--dens-heading-xl-size: clamp(2.5rem, 6vw, 6rem);
	--dens-heading-xl-line-height: 0.95;

	/* Nevtralna paleta (stone/neutral) */
	--dens-surface-0: #fafaf9;   /* stone-50 — ozadje kartic, povzetek, navbar */
	--dens-surface-1: #ffffff;   /* white — ozadje vhodnih polj */
	--dens-surface-2: #f5f5f4;   /* stone-100 */
	--dens-border: #e7e5e4;      /* stone-200 — kartice, razdelilne črte */
	--dens-border-strong: #d6d3d1; /* stone-300 — vhodna polja, neizbrane kartice */
	--dens-text-primary: #1c1917;   /* stone-900 — primarno besedilo, naslovi */
	--dens-text-secondary: #57534e; /* stone-600 — besedilo telesa, opisi */
	--dens-text-muted: #78716c;     /* stone-500 — pomožno besedilo */
	--dens-text-faint: #a8a29e;     /* stone-400 — pomožno besedilo, neizbrane ikone */
	--dens-inverse-surface: #1c1917; /* stone-900 — primarni gumb, krog koraka */
	--dens-inverse-text: #fafafa;    /* neutral-50 */

	/* Identiteta / poudarek (amber-500) */
	--dens-accent: #f59e0b;
	--dens-accent-tint: #fffbeb;   /* amber-50 — ozadje izbrane kartice */
	--dens-accent-border: #f59e0b; /* amber-500 — obroba izbrane kartice/fokus */
	--dens-accent-contrast-text: var(--dens-inverse-surface);

	/* Pastelne blagovne znamke — raznolikost ikon/značk, ne glavni poudarki */
	--dens-tint-lavender: #f5dcfc;
	--dens-tint-sky: #d9e2f5;
	--dens-tint-green: #87e1a9;
	--dens-tint-peach: #fccbc8;
	--dens-tint-rose: #f9a8d4;

	/* Stanje */
	--dens-status-paid: #22c55e;
	--dens-status-unpaid: #f59e0b;
	--dens-status-overdue: #ef4444;
	--dens-status-paid-bg: #dcfce7;
	--dens-status-unpaid-bg: #fef3c7;
	--dens-status-overdue-bg: #fee2e2;

	/* Destruktivne akcije (gumb hover, ne status badge) */
	--dens-danger-border: #f87171; /* red-400 */
	--dens-danger-text: #ef4444;   /* red-500 */

	/* Admin — ločena, nevtralnejša paleta (brez amber/oranžne, glej docs/design.md 3.10) */
	--dens-admin-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--dens-page-bg: #eef0f6;         /* mehko lavender-sivo ozadje platna */
	--dens-highlight: #d9f24e;       /* limeta — majhni poudarjeni pill-i (namesto amber v adminu) */
	--dens-highlight-text: var(--dens-inverse-surface);
	--dens-admin-feature-bg: #fbe6ff;      /* poudarjena bento kartica (namesto zelene) */
	--dens-overlay-light: rgba(255, 255, 255, 0.6); /* ikona-krog na tintani kartici */
	--dens-shadow-sm: rgba(28, 25, 23, 0.035);
	--dens-shadow-md: rgba(28, 25, 23, 0.06);

	/* Animacija */
	--dens-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dens-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

@keyframes dens-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/**
 * Skupne komponente, ki jih izriše DENS_UI (includes/class-dens-ui.php).
 * Uporabljene tako v adminu kot na frontendu — en sam vizualni jezik.
 * Glej docs/design.md točka 3.4.
 */

.dens-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: none;
	border-radius: var(--dens-radius-pill);
	font-family: var(--dens-font-body);
	font-size: 0.875rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 200ms var(--dens-ease-out), color 200ms var(--dens-ease-out), border-color 200ms var(--dens-ease-out);
}
.dens-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.dens-btn--block {
	width: 100%;
}
.dens-btn svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* Primarni — glavna akcija (npr. "Naprej", "Shrani") */
.dens-btn--primary {
	background: var(--dens-inverse-surface);
	color: var(--dens-inverse-text);
	font-weight: 700;
	padding: 1rem 1.5rem;
}
.dens-btn--primary:hover:not(:disabled) {
	background: var(--dens-accent);
	color: var(--dens-accent-contrast-text);
}

/* Sekundarni — manjša različica primarnega (iste barve, manj poudarka) */
.dens-btn--secondary {
	background: var(--dens-inverse-surface);
	color: var(--dens-inverse-text);
	font-weight: 500;
	padding: 0.75rem 1.5rem;
}
.dens-btn--secondary:hover:not(:disabled) {
	background: var(--dens-accent);
	color: var(--dens-accent-contrast-text);
}

/* Destruktivni — izbriši/prekliči, obrobni slog */
.dens-btn--destructive {
	background: transparent;
	color: var(--dens-text-secondary);
	font-weight: 500;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--dens-border-strong);
}
.dens-btn--destructive:hover:not(:disabled) {
	border-color: var(--dens-danger-border);
	color: var(--dens-danger-text);
}

/* Akcentni — na temni/kontrastni podlagi */
.dens-btn--accent {
	background: var(--dens-accent);
	color: var(--dens-accent-contrast-text);
	font-weight: 700;
	padding: 1rem 1.5rem;
}
.dens-btn--accent:hover:not(:disabled) {
	background: var(--dens-surface-0);
}

.dens-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 1rem;
}

.dens-field__label {
	font-family: var(--dens-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--dens-text-primary);
}

.dens-field__required {
	color: var(--dens-accent);
}

.dens-field__hint {
	font-size: 0.75rem;
	color: var(--dens-text-muted);
}

.dens-input,
.dens-select {
	width: 100%;
	border-radius: var(--dens-radius);
	border: 1px solid var(--dens-border-strong);
	background: var(--dens-surface-1);
	color: var(--dens-text-primary);
	padding: 0.75rem 1rem;
	font-family: var(--dens-font-body);
	font-size: 0.875rem;
}

.dens-input:focus,
.dens-select:focus {
	outline: none;
	border-color: var(--dens-accent-border);
	box-shadow: 0 0 0 1px var(--dens-accent-border);
}

/* Checkbox zabojnik */
.dens-checkbox-field {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: var(--dens-radius-panel);
	border: 1px solid var(--dens-border);
	background: var(--dens-surface-0);
	cursor: pointer;
}
.dens-checkbox-field input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 4px;
	border: 1px solid var(--dens-border-strong);
	accent-color: var(--dens-accent);
}
.dens-checkbox-field__label {
	font-family: var(--dens-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--dens-text-primary);
}

/* Pogojni zabojnik — dinamično prikazane sekcije (npr. company billing) */
.dens-conditional {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
	padding: 1.5rem;
	border-radius: var(--dens-radius-panel);
	border: 1px solid var(--dens-border);
	background: var(--dens-surface-0);
}
.dens-conditional--boxed {
	margin-top: 1.5rem;
}

/* Naslov koraka — oštevilčen naslov sekcije */
.dens-step-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	font-family: var(--dens-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--dens-text-primary);
}
.dens-step-title__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border-radius: var(--dens-radius-pill);
	background: var(--dens-inverse-surface);
	color: var(--dens-inverse-text);
	font-family: var(--dens-font-body);
	font-size: 0.875rem;
	font-weight: 600;
}

/* Izbirna kartica — npr. paket/nivo članstva */
.dens-choice-card {
	display: block;
	border-radius: var(--dens-radius-panel);
	border: 1px solid var(--dens-border);
	background: var(--dens-surface-0);
	padding: 1.5rem;
	cursor: pointer;
	transition: border-color 200ms var(--dens-ease-out), background-color 200ms var(--dens-ease-out);
}
.dens-choice-card:hover {
	border-color: var(--dens-border-strong);
}
.dens-choice-card--selected {
	border-color: var(--dens-accent-border);
	background: var(--dens-accent-tint);
}
.dens-choice-card--selected:hover {
	border-color: var(--dens-accent-border);
}

.dens-choice-card__radio {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	border: 2px solid var(--dens-border-strong);
}
.dens-choice-card--selected .dens-choice-card__radio {
	border-color: var(--dens-accent-border);
	background: var(--dens-accent);
	color: var(--dens-text-primary);
}

.dens-choice-card__title {
	font-family: var(--dens-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--dens-text-primary);
}

.dens-choice-card__desc {
	margin-top: 0.25rem;
	font-family: var(--dens-font-body);
	font-size: 0.875rem;
	color: var(--dens-text-secondary);
}

.dens-choice-card__price {
	font-family: var(--dens-font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--dens-text-primary);
}
.dens-choice-card__price-period {
	display: block;
	font-family: var(--dens-font-body);
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--dens-text-muted);
}

/* Ikonska kartica — npr. način plačila */
.dens-icon-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem;
}
.dens-icon-card__icon {
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	color: var(--dens-text-faint);
}
.dens-icon-card--selected .dens-icon-card__icon {
	color: var(--dens-accent);
}
.dens-icon-card__title {
	font-family: var(--dens-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--dens-text-primary);
}
.dens-icon-card__subtitle {
	margin-top: 0.25rem;
	font-family: var(--dens-font-body);
	font-size: 0.75rem;
	color: var(--dens-text-secondary);
}

/* Povzetek (naročilo, plačilo ...) */
.dens-summary {
	border-radius: var(--dens-radius-tile);
	border: 1px solid var(--dens-border);
	background: var(--dens-surface-0);
	padding: 2rem;
}
.dens-summary__title {
	font-family: var(--dens-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--dens-text-primary);
	margin-bottom: 1rem;
}
.dens-summary__row {
	display: flex;
	justify-content: space-between;
	font-family: var(--dens-font-body);
	font-size: 0.875rem;
	padding: 0.5rem 0;
}
.dens-summary__row-label {
	color: var(--dens-text-muted);
}
.dens-summary__row-value {
	font-weight: 700;
	color: var(--dens-text-primary);
}
.dens-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--dens-border);
	font-family: var(--dens-font-heading);
	font-size: 1.875rem;
	font-weight: 800;
	color: var(--dens-accent);
}
.dens-summary__note {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 1rem;
	font-family: var(--dens-font-body);
	font-size: 0.75rem;
	color: var(--dens-text-faint);
}
.dens-summary__note svg {
	width: 0.75rem;
	height: 0.75rem;
}

/* Uspešno stanje */
.dens-success {
	text-align: center;
	padding: var(--dens-section-py-min) 1.5rem;
}
.dens-success__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	margin: 0 auto 2rem;
	border-radius: 50%;
	background: var(--dens-accent);
	color: var(--dens-text-primary);
}
.dens-success__icon svg {
	width: 2.5rem;
	height: 2.5rem;
}
.dens-success__title {
	font-family: var(--dens-font-heading);
	font-size: 1.875rem;
	font-weight: 800;
	color: var(--dens-text-primary);
}
.dens-success__desc {
	margin-top: 1.5rem;
	font-family: var(--dens-font-body);
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--dens-text-secondary);
}

@media (min-width: 768px) {
	.dens-success__title {
		font-size: 2.25rem;
	}
}

/* Avatar z inicialkami — glej DENS_UI::initials_avatar() */

.dens-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border-radius: 50%;
	font-family: var(--dens-font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--dens-text-primary);
}

.dens-avatar--lavender { background: var(--dens-tint-lavender); }
.dens-avatar--sky      { background: var(--dens-tint-sky); }
.dens-avatar--green    { background: var(--dens-tint-green); }
.dens-avatar--peach    { background: var(--dens-tint-peach); }
.dens-avatar--rose     { background: var(--dens-tint-rose); }