/*
 * EE Casino Review – glavni CSS fajl.
 * Tokeni, reset, header i dugmad su u critical.css (inline u <head>); ovde je sve ostalo.
 */

/* Prelivanje ----------------------------------------------------------- */

/*
 * 1. Kontejneri sa skrolom moraju biti containing block za apsolutne potomke. Inače
 *    .screen-reader-text (position: absolute) u ćelijama tabele „pobegne“ iz overflow-a
 *    i proširi celu stranicu (uzrok vodoravnog skrola na hubu: tabela poređenja).
 * 2. Grid/flex stavke imaju min-width: auto = min-content sadržaja; traka pill filtera
 *    (nowrap) bi tako raširila kolonu preko ekrana. min-width: 0 to sprečava.
 */
.ek-table-wrap,
.ek-prose .wp-block-table,
.ek-filter__pills,
.ek-tabs__list,
.ek-toc--sticky {
	position: relative;
}

.ek-grid > *,
.ek-toplist > li,
.ek-row__main > *,
.ek-hero > *,
.ek-review__aside,
.ek-review__main,
.ek-tiles__list > li,
.ek-footer__grid > *,
.ek-preview__aside,
.ek-preview__main {
	min-width: 0;
}

/* Glavni sadržaj ------------------------------------------------------- */

.ek-main {
	display: block;
	min-height: 50vh;
}

.ek-content {
	padding-block: var(--ek-s-6) var(--ek-s-8);
}

.ek-section {
	padding-block: var(--ek-s-7);
}

.ek-section--tight {
	padding-block: var(--ek-s-5);
}

/* Tamna sekcija (hero) – nastavlja header. */
.ek-dark {
	background: var(--ek-ink);
	color: var(--ek-on-ink);
}

.ek-dark a:not(.ek-btn) {
	color: var(--ek-gold-2);
}

.ek-card {
	padding: var(--ek-s-5);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
	box-shadow: var(--ek-shadow-1);
}

.ek-muted {
	color: var(--ek-muted);
}

.ek-entry + .ek-entry {
	margin-top: var(--ek-s-6);
	padding-top: var(--ek-s-6);
	border-top: 1px solid var(--ek-line);
}

.ek-entry__title a {
	color: inherit;
	text-decoration: none;
}

.ek-entry__title a:hover {
	color: var(--ek-link);
}

/* Paginacija */
.navigation.pagination {
	margin-top: var(--ek-s-6);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ek-s-2);
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--ek-s-3);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r);
	background: var(--ek-surface);
	color: var(--ek-text);
	text-decoration: none;
}

.nav-links .page-numbers.current {
	border-color: var(--ek-ink);
	background: var(--ek-ink);
	color: var(--ek-on-ink);
}

/* Sadržaj iz editora (core block CSS se ne učitava) -------------------- */

.ek-prose {
	font-size: var(--ek-fs-lg);
}

.ek-prose > * + * {
	margin-top: var(--ek-s-4);
}

.ek-prose h2 {
	margin-top: var(--ek-s-7);
}

.ek-prose h3 {
	margin-top: var(--ek-s-6);
}

.ek-prose ul,
.ek-prose ol {
	padding-left: 1.4em;
}

.ek-prose li + li {
	margin-top: var(--ek-s-1);
}

.ek-prose ul li::marker {
	color: var(--ek-gold-ink);
}

.ek-prose blockquote,
.ek-prose .wp-block-quote {
	margin-inline: 0;
	padding: var(--ek-s-4) var(--ek-s-5);
	border-left: 4px solid var(--ek-gold);
	border-radius: 0 var(--ek-r) var(--ek-r) 0;
	background: var(--ek-surface);
}

.ek-prose blockquote p:last-child {
	margin-bottom: 0;
}

.ek-prose cite {
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
	font-style: normal;
}

.ek-prose hr,
.ek-prose .wp-block-separator {
	margin-block: var(--ek-s-6);
	border: 0;
	border-top: 1px solid var(--ek-line);
}

.ek-prose figure {
	margin-inline: 0;
}

.ek-prose figcaption,
.ek-prose .wp-element-caption {
	margin-top: var(--ek-s-2);
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
	text-align: center;
}

.ek-prose img {
	border-radius: var(--ek-r);
}

.ek-prose .aligncenter {
	margin-inline: auto;
}

.ek-prose .has-text-align-center {
	text-align: center;
}

.ek-prose .has-text-align-right {
	text-align: right;
}

@media (min-width: 640px) {
	.ek-prose .alignleft {
		float: left;
		max-width: 50%;
		margin: 0 var(--ek-s-5) var(--ek-s-4) 0;
	}

	.ek-prose .alignright {
		float: right;
		max-width: 50%;
		margin: 0 0 var(--ek-s-4) var(--ek-s-5);
	}
}

/* Tabele: horizontalni skrol na mobilnom umesto lomljenja layouta. */
.ek-prose .wp-block-table,
.ek-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ek-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ek-fs-base);
	background: var(--ek-surface);
}

.ek-prose th,
.ek-prose td {
	padding: var(--ek-s-3) var(--ek-s-4);
	border-bottom: 1px solid var(--ek-line);
	text-align: left;
	vertical-align: top;
}

.ek-prose th {
	background: var(--ek-surface-2);
	font-weight: 600;
}

/* Embedovi (YouTube i sl.) */
.ek-prose .wp-block-embed__wrapper iframe,
.ek-prose iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.ek-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ek-s-3);
}

.ek-prose .wp-block-button__link {
	display: inline-flex;
	padding: 10px 20px;
	border-radius: var(--ek-r);
	background: var(--ek-ink);
	color: var(--ek-on-ink);
	font-weight: 600;
	text-decoration: none;
}

/* Footer --------------------------------------------------------------- */

.ek-footer {
	margin-top: var(--ek-s-8);
	background: var(--ek-ink);
	color: var(--ek-on-ink-muted);
	font-size: var(--ek-fs-sm);
}

.ek-footer a {
	color: var(--ek-on-ink);
}

.ek-footer a:hover {
	color: var(--ek-gold);
}

.ek-footer__grid {
	display: grid;
	gap: var(--ek-s-6);
	padding-block: var(--ek-s-7);
}

@media (min-width: 640px) {
	.ek-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.ek-footer__grid {
		grid-template-columns: 2fr 1fr 1fr 1.5fr;
	}
}

.ek-footer .ek-logo {
	margin-bottom: var(--ek-s-4);
}

.ek-footer__text p {
	margin-bottom: var(--ek-s-3);
}

.ek-footer__title {
	margin-bottom: var(--ek-s-3);
	color: var(--ek-on-ink);
	font-weight: 600;
}

.ek-footer__list {
	display: grid;
	gap: var(--ek-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ek-footer__list a {
	text-decoration: none;
}

.ek-help p {
	margin-bottom: var(--ek-s-2);
}

.ek-footer__bottom {
	border-top: 1px solid var(--ek-ink-line);
}

.ek-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-3) var(--ek-s-5);
	padding-block: var(--ek-s-5);
}

.ek-footer__age {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-2);
	margin: 0;
	flex: 1 1 320px;
}

.ek-footer__age .ek-age-badge {
	color: var(--ek-gold);
	font-size: var(--ek-fs-sm);
}

.ek-footer__copy {
	margin: 0;
}

.ek-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ek-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ek-social__list a {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--ek-ink-line);
	border-radius: var(--ek-r-pill);
	text-decoration: none;
}

/* =====================================================================
 * Komponente (template-parts/components/)
 * ================================================================== */

/* Bedževi */
.ek-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--ek-r-pill);
	background: var(--ek-surface-2);
	color: var(--ek-text);
	font-size: var(--ek-fs-xs);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.ek-badge--exclusive {
	background: var(--ek-gold);
	color: var(--ek-ink);
}

.ek-badge--new {
	background: var(--ek-success-bg);
	color: var(--ek-success);
}

.ek-badge--crypto {
	background: var(--ek-ink-3);
	color: var(--ek-on-ink);
}

.ek-badge--ee-license {
	background: #e8eefc;
	color: #1f3f8f;
}

.ek-badge--type {
	border: 1px solid var(--ek-line);
	background: transparent;
	color: var(--ek-muted);
}

/* Logo kazina: samo logo, transparentno, ceo (contain); bez logoa naziv tekstom.
   Okviri: row 160×80 (120×60 ispod 960 px, 96×48 ispod 480 px), card 120×60, sticky 64×32. Upload: 320×160 (2:1). */
.ek-logo-box {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: flex-start;
	width: 120px;
	height: 60px;
}

.ek-logo-box--row {
	width: 96px;
	height: 48px;
}

@media (min-width: 480px) {
	.ek-logo-box--row {
		width: 120px;
		height: 60px;
	}
}

@media (min-width: 960px) {
	.ek-logo-box--row {
		width: 160px;
		height: 80px;
	}
}

.ek-logo-box--sticky {
	width: 64px;
	height: 32px;
}

.ek-logo-box__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: left center;
}

.ek-logo-box--text {
	display: -webkit-box;
	height: auto;
	max-height: 60px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--ek-text);
	font-family: var(--ek-font-display);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.ek-logo-box--sticky.ek-logo-box--text {
	max-height: 32px;
	font-size: 0.8125rem;
	-webkit-line-clamp: 2;
}

.ek-dark .ek-logo-box--text {
	color: var(--ek-on-ink);
}

/* Ocena */
.ek-rating {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	line-height: 1;
}

.ek-rating__score {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.ek-rating__star {
	align-self: center;
	width: 1em;
	height: 1em;
	color: var(--ek-gold);
}

.ek-rating__value {
	font-size: 1.375rem;
}

.ek-rating__max {
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
	font-weight: 500;
}

.ek-rating__label {
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
}

.ek-rating--sm .ek-rating__value {
	font-size: 1rem;
}

.ek-rating--lg .ek-rating__value {
	font-size: 2.25rem;
}

.ek-rating--lg .ek-rating__star {
	width: 1.75rem;
	height: 1.75rem;
}

.ek-rating--none {
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
}

.ek-dark .ek-rating__max,
.ek-dark .ek-rating__label {
	color: var(--ek-on-ink-muted);
}

/* Ocene po kategorijama */
.ek-breakdown {
	padding: var(--ek-s-5);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
}

.ek-breakdown__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ek-s-3);
	margin-bottom: var(--ek-s-4);
}

.ek-breakdown__title {
	margin: 0;
}

.ek-breakdown__list {
	display: grid;
	gap: var(--ek-s-3);
	margin: 0;
}

.ek-breakdown__row {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr);
	align-items: center;
	gap: var(--ek-s-3);
}

.ek-breakdown__label {
	font-size: var(--ek-fs-sm);
	font-weight: 500;
}

.ek-breakdown__value {
	display: flex;
	align-items: center;
	gap: var(--ek-s-3);
	margin: 0;
}

.ek-breakdown__value .ek-num {
	min-width: 2.2em;
	text-align: right;
}

.ek-bar {
	flex: 1;
	height: 8px;
	overflow: hidden;
	border-radius: var(--ek-r-pill);
	background: var(--ek-line);
}

.ek-bar__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ek-gold), #f08c1a);
}

/* Chipovi */
.ek-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-2);
}

.ek-chips + .ek-chips {
	margin-top: var(--ek-s-3);
}

.ek-chips__label {
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
	font-weight: 600;
}

.ek-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ek-chips__list:focus {
	outline: none;
}

.ek-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 2px 10px;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-pill);
	background: var(--ek-surface);
	color: var(--ek-text);
	font-size: var(--ek-fs-xs);
	font-weight: 500;
	line-height: 1.3;
}

.ek-chip a {
	color: inherit;
	text-decoration: none;
}

/* Način plaćanja sa logom: bela kartica 48×32 (logo 120×80, 3:2). */
.ek-chip--icon {
	justify-content: center;
	width: 48px;
	height: 32px;
	min-height: 32px;
	/* Unutrašnji razmak: logo koji ide do ivica slike ne dodiruje okvir. */
	padding: 4px;
	overflow: hidden;
	border-radius: var(--ek-r-sm);
	background: #fff;
}

.ek-chip--icon a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.ek-chip__logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ek-chips--payment .ek-chip {
	min-height: 32px;
}

.ek-chip--more {
	background: var(--ek-surface-2);
	font-weight: 700;
	cursor: pointer;
}

.ek-chip--more:hover {
	border-color: var(--ek-ink);
}

html.ek-js .ek-chips.is-collapsed .ek-chip--extra,
html:not(.ek-js) .ek-chips__more-item {
	display: none;
}

/* Plusevi / minusevi */
.ek-proscons {
	display: grid;
	gap: var(--ek-s-4);
}

@media (min-width: 640px) {
	.ek-proscons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ek-proscons__card {
	padding: var(--ek-s-5);
	border-radius: var(--ek-r-lg);
	border-top: 4px solid var(--ek-success);
	background: var(--ek-success-bg);
}

.ek-proscons__card--cons {
	border-top-color: var(--ek-danger);
	background: var(--ek-danger-bg);
}

.ek-proscons__title {
	font-size: var(--ek-fs-h3);
}

.ek-proscons__list {
	display: grid;
	gap: var(--ek-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ek-proscons__list li,
.ek-row__bullets li,
.ek-ccard__bullets li {
	display: flex;
	align-items: flex-start;
	gap: var(--ek-s-2);
}

.ek-proscons__list .ek-icon,
.ek-row__bullets .ek-icon,
.ek-ccard__bullets .ek-icon {
	flex: none;
	margin-top: 0.2em;
}

.ek-proscons__card--pros .ek-icon,
.ek-row__bullets .ek-icon,
.ek-ccard__bullets .ek-icon {
	color: var(--ek-success);
}

.ek-proscons__card--cons .ek-icon {
	color: var(--ek-danger);
}

/* Autor */
.ek-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-3) var(--ek-s-5);
	font-size: var(--ek-fs-sm);
}

.ek-author__person {
	display: flex;
	align-items: center;
	gap: var(--ek-s-3);
}

.ek-author__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.ek-author__text,
.ek-author__date {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.ek-author__role {
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
}

.ek-author__name {
	color: var(--ek-text);
	font-weight: 600;
	text-decoration: none;
}

.ek-author__name:hover {
	text-decoration: underline;
}

.ek-author--dark .ek-author__role {
	color: var(--ek-on-ink-muted);
}

.ek-author--dark .ek-author__name,
.ek-dark .ek-author--dark .ek-author__name {
	color: var(--ek-on-ink);
}

/* TOC */
.ek-toc {
	padding: var(--ek-s-4);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
	font-size: var(--ek-fs-sm);
}

@media (min-width: 960px) {
	.ek-toc--sticky {
		position: sticky;
		top: var(--ek-s-4);
		max-height: calc(100vh - 2 * var(--ek-s-4));
		overflow-y: auto;
	}
}

.ek-toc__title {
	margin-bottom: var(--ek-s-2);
	font-family: var(--ek-font-display);
	font-weight: 700;
}

.ek-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ek-toc__link {
	display: block;
	padding: 6px var(--ek-s-3);
	border-left: 3px solid transparent;
	color: var(--ek-muted);
	text-decoration: none;
}

.ek-toc__link:hover {
	color: var(--ek-text);
}

.ek-toc__link.is-active {
	border-left-color: var(--ek-gold);
	color: var(--ek-text);
	font-weight: 600;
}

/* FAQ */
.ek-faq__list {
	border-top: 1px solid var(--ek-line);
}

.ek-faq__item {
	border-bottom: 1px solid var(--ek-line);
}

.ek-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ek-s-4);
	padding: var(--ek-s-4) 0;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.ek-faq__q::-webkit-details-marker {
	display: none;
}

.ek-faq__icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--ek-gold-ink);
	transition: transform 0.2s;
}

.ek-faq__item[open] .ek-faq__icon {
	transform: rotate(180deg);
}

.ek-faq__a {
	padding-bottom: var(--ek-s-4);
	color: var(--ek-muted);
}

.ek-faq__a > :last-child {
	margin-bottom: 0;
}

/* Breadcrumbs */
.ek-breadcrumbs {
	margin-bottom: var(--ek-s-4);
	font-size: var(--ek-fs-sm);
}

.ek-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ek-muted);
}

.ek-breadcrumbs__item + .ek-breadcrumbs__item::before {
	content: "›";
	margin: 0 var(--ek-s-2);
	color: var(--ek-muted);
}

.ek-breadcrumbs a {
	color: inherit;
}

.ek-breadcrumbs [aria-current] {
	color: var(--ek-text);
}

.ek-breadcrumbs--dark .ek-breadcrumbs__list,
.ek-breadcrumbs--dark .ek-breadcrumbs__item::before {
	color: var(--ek-on-ink-muted);
}

.ek-dark .ek-breadcrumbs--dark a:not(.ek-btn) {
	color: var(--ek-on-ink-muted);
}

.ek-breadcrumbs--dark [aria-current] {
	color: var(--ek-on-ink);
}

/* T&C linija i disclosure */
.ek-tc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px var(--ek-s-2);
	margin: 0;
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
	line-height: 1.4;
}

.ek-tc a {
	color: inherit;
}

.ek-disclosure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px var(--ek-s-2);
	margin: 0 0 var(--ek-s-4);
	padding: var(--ek-s-3) var(--ek-s-4);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r);
	background: var(--ek-surface-2);
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
	line-height: 1.45;
}

.ek-disclosure__label {
	padding: 1px 8px;
	border-radius: var(--ek-r-pill);
	background: var(--ek-ink);
	color: var(--ek-on-ink);
	font-size: var(--ek-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Grid i top lista */
.ek-grid {
	display: grid;
	gap: var(--ek-s-4);
}

.ek-grid--bonus,
.ek-toplist--card {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.ek-toplist {
	display: grid;
	gap: var(--ek-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Bonus kartica */
.ek-bonus {
	display: flex;
	flex-direction: column;
	gap: var(--ek-s-4);
	padding: var(--ek-s-5);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
	box-shadow: var(--ek-shadow-1);
}

.ek-bonus.is-exclusive {
	border: 2px solid var(--ek-gold);
}

.ek-bonus__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-2) var(--ek-s-3);
}

.ek-bonus__casino {
	font-weight: 600;
}

.ek-bonus__casino a {
	color: var(--ek-text);
	text-decoration: none;
}

.ek-bonus__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-left: auto;
}

.ek-bonus__amount {
	margin: 0;
	font-family: var(--ek-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ek-bonus__desc {
	margin: var(--ek-s-1) 0 0;
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
	line-height: 1.4;
}

.ek-code {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-2);
	padding: var(--ek-s-2) var(--ek-s-2) var(--ek-s-2) var(--ek-s-4);
	border: 2px dashed var(--ek-gold);
	border-radius: var(--ek-r);
	background: #fffaf0;
}

.ek-code--none {
	padding: var(--ek-s-3) var(--ek-s-4);
	border-color: var(--ek-line);
	background: var(--ek-surface-2);
}

.ek-code__label {
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
	font-weight: 600;
}

.ek-code__value {
	flex: 1;
	font-family: var(--ek-font-display);
	font-size: var(--ek-fs-lg);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.ek-code__copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 var(--ek-s-3);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-sm);
	background: var(--ek-surface);
	color: var(--ek-text);
	font-size: var(--ek-fs-sm);
	font-weight: 600;
	cursor: pointer;
}

.ek-code__copy:hover {
	border-color: var(--ek-ink);
}

.ek-code__copy.is-copied {
	border-color: var(--ek-success);
	color: var(--ek-success);
}

.ek-terms {
	display: grid;
	gap: 0;
	margin: 0;
	font-size: var(--ek-fs-sm);
}

.ek-terms__row {
	display: flex;
	justify-content: space-between;
	gap: var(--ek-s-3);
	padding: 6px 0;
	border-bottom: 1px dashed var(--ek-line);
}

.ek-terms dt {
	color: var(--ek-muted);
}

.ek-terms dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.ek-bonus__actions {
	margin-top: auto;
}

@media (min-width: 768px) {
	.ek-bonus--wide {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		grid-template-areas:
			"head head"
			"offer terms"
			"code terms"
			"actions terms"
			"tc tc";
		gap: var(--ek-s-4) var(--ek-s-6);
		padding: var(--ek-s-6);
	}

	.ek-bonus--wide .ek-bonus__head { grid-area: head; }
	.ek-bonus--wide .ek-bonus__offer { grid-area: offer; }
	.ek-bonus--wide .ek-code { grid-area: code; }
	.ek-bonus--wide .ek-terms { grid-area: terms; align-self: start; }
	.ek-bonus--wide .ek-bonus__actions { grid-area: actions; }
	.ek-bonus--wide .ek-tc { grid-area: tc; }

	.ek-bonus--wide .ek-bonus__amount {
		font-size: 2rem;
	}
}

/* Red top liste */
.ek-row {
	padding: var(--ek-s-4);
	border: 1px solid var(--ek-line);
	border-left: 4px solid var(--ek-brand, var(--ek-gold));
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
	box-shadow: var(--ek-shadow-1);
}

.ek-row__main {
	display: grid;
	gap: var(--ek-s-4);
}

@media (min-width: 960px) {
	.ek-row {
		padding: var(--ek-s-5);
	}

	.ek-row__main {
		grid-template-columns: minmax(300px, 1.4fr) minmax(170px, 1fr) minmax(180px, 1.1fr) 180px;
		align-items: center;
		gap: var(--ek-s-5);
	}
}

.ek-row__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-3);
	min-width: 0;
}

.ek-rank {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.ek-rank__star {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--ek-gold);
}

.ek-rank__n {
	position: relative;
	padding-top: 3px;
	color: var(--ek-ink);
	font-family: var(--ek-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
}

.ek-row__id {
	display: flex;
	flex: 1 1 100px;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
}

/* Bedž širi od kolone (uske kolone na 320 px) prelama tekst umesto da izađe iz reda. */
.ek-row__badges .ek-badge {
	max-width: 100%;
	white-space: normal;
}

.ek-row__name {
	margin: 0;
	font-size: var(--ek-fs-lg);
	overflow-wrap: anywhere;
}

.ek-row__name a,
.ek-ccard__name a {
	color: var(--ek-text);
	text-decoration: none;
}

.ek-row__name a:hover,
.ek-ccard__name a:hover {
	color: var(--ek-link);
}

.ek-row__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	/* .ek-row__id je kolona sa align-items: flex-start: bez ovoga bedževi ne prelaze u novi red. */
	max-width: 100%;
}

.ek-row__bonus {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--ek-s-3);
	border: 1px dashed var(--ek-gold);
	border-radius: var(--ek-r);
	background: #fffaf0;
	line-height: 1.3;
}

.ek-row__bonus:empty {
	display: none;
}

.ek-row__bonus-label {
	color: var(--ek-gold-ink);
	font-size: var(--ek-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ek-row__bonus-amount {
	font-size: 1.25rem;
}

.ek-row__bonus-title,
.ek-row__code {
	font-size: var(--ek-fs-sm);
}

.ek-row__code code {
	font-weight: 700;
}

.ek-row__bullets,
.ek-ccard__bullets {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-size: var(--ek-fs-sm);
	list-style: none;
}

.ek-row__actions {
	display: flex;
	flex-direction: column;
	gap: var(--ek-s-2);
}

.ek-row__links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ek-s-2);
	font-size: var(--ek-fs-sm);
}

.ek-row__review {
	color: var(--ek-text);
	font-weight: 600;
}

.ek-row__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ek-link);
	font-size: var(--ek-fs-sm);
	cursor: pointer;
}

.ek-row__toggle .ek-icon {
	transition: transform 0.2s;
}

.ek-row__toggle[aria-expanded="true"] .ek-icon {
	transform: rotate(180deg);
}

html:not(.ek-js) .ek-row__toggle {
	display: none;
}

.ek-row > .ek-chips {
	margin-top: var(--ek-s-4);
	padding-top: var(--ek-s-3);
	border-top: 1px solid var(--ek-line);
}

.ek-row__details {
	display: grid;
	gap: var(--ek-s-4);
	margin-top: var(--ek-s-4);
	padding: var(--ek-s-4);
	border-radius: var(--ek-r);
	background: var(--ek-surface-2);
}

html.ek-js .ek-row__details:not(.is-open) {
	display: none;
}

.ek-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--ek-s-3);
	margin: 0;
}

.ek-facts dt {
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
}

.ek-facts dd {
	margin: 0;
	font-weight: 600;
}

.ek-row > .ek-tc {
	margin-top: var(--ek-s-3);
}

/* Kartica kazina */
.ek-ccard {
	display: flex;
	flex-direction: column;
	gap: var(--ek-s-3);
	height: 100%;
	padding: var(--ek-s-5);
	border: 1px solid var(--ek-line);
	border-top: 4px solid var(--ek-brand, var(--ek-gold));
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
	box-shadow: var(--ek-shadow-1);
}

.ek-ccard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 24px;
}

.ek-ccard__rank {
	margin-left: auto;
	color: var(--ek-muted);
	font-family: var(--ek-font-display);
	font-size: var(--ek-fs-sm);
	font-weight: 700;
}

.ek-ccard__brand {
	display: flex;
	align-items: center;
	gap: var(--ek-s-3);
}

.ek-ccard__name {
	margin: 0 0 4px;
	font-size: var(--ek-fs-lg);
}

.ek-ccard__bonus {
	display: flex;
	flex-direction: column;
	padding: var(--ek-s-3);
	border-radius: var(--ek-r);
	background: #fffaf0;
	font-size: var(--ek-fs-sm);
	line-height: 1.35;
}

.ek-ccard__amount {
	font-size: 1.25rem;
}

.ek-ccard__actions {
	display: flex;
	flex-direction: column;
	gap: var(--ek-s-2);
	margin-top: auto;
	text-align: center;
}

.ek-ccard__review {
	color: var(--ek-text);
	font-size: var(--ek-fs-sm);
	font-weight: 600;
}

/* Kategorije: pločice i chipovi */
.ek-tiles__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
	gap: var(--ek-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ek-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: var(--ek-s-4) var(--ek-s-4) var(--ek-s-6);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
	color: var(--ek-text);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ek-tile:hover {
	border-color: var(--ek-gold);
	box-shadow: var(--ek-shadow-2);
}

.ek-tile[aria-current] {
	border-color: var(--ek-ink);
}

.ek-tile__label {
	font-family: var(--ek-font-display);
	font-size: var(--ek-fs-base);
	font-weight: 700;
	line-height: 1.25;
}

.ek-tile__count {
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
}

.ek-tile__arrow {
	position: absolute;
	right: var(--ek-s-4);
	bottom: var(--ek-s-4);
	color: var(--ek-gold-ink);
}

.ek-catchips {
	margin-top: var(--ek-s-4);
}

.ek-catchips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ek-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ek-pill {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-pill);
	background: var(--ek-surface);
	color: var(--ek-text);
	font-size: var(--ek-fs-sm);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.ek-pill:hover {
	border-color: var(--ek-ink);
}

.ek-pill.is-active {
	border-color: var(--ek-ink);
	background: var(--ek-ink);
	color: var(--ek-on-ink);
}

.ek-pill__count {
	padding: 0 6px;
	border-radius: var(--ek-r-pill);
	background: var(--ek-surface-2);
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
	font-weight: 600;
}

.ek-pill.is-active .ek-pill__count {
	background: var(--ek-ink-3);
	color: var(--ek-on-ink);
}

/* Filteri */
html:not(.ek-js) .ek-filter {
	display: none;
}

.ek-filter {
	margin-bottom: var(--ek-s-4);
	padding: var(--ek-s-4);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
}

.ek-filter__title {
	margin-bottom: var(--ek-s-2);
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ek-filter__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--ek-s-3) var(--ek-s-4);
}

/* Na mobilnom se pill-ovi skroluju horizontalno umesto da zauzmu pola ekrana. */
.ek-filter__pills {
	display: flex;
	gap: var(--ek-s-2);
	width: calc(100% + 2 * var(--ek-s-4));
	margin: 0 calc(-1 * var(--ek-s-4));
	padding: 2px var(--ek-s-4);
	overflow-x: auto;
	scrollbar-width: thin;
}

@media (min-width: 768px) {
	.ek-filter__pills {
		flex-wrap: wrap;
		width: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

.ek-filter__select {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 180px;
}

.ek-filter__label {
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
	font-weight: 600;
}

.ek-filter__select select {
	min-height: 40px;
	padding: 0 var(--ek-s-3);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r);
	background: var(--ek-surface);
	color: var(--ek-text);
	font: inherit;
	font-size: var(--ek-fs-sm);
}

.ek-filter__status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ek-s-3);
	margin-top: var(--ek-s-3);
	font-size: var(--ek-fs-sm);
}

.ek-filter__count {
	margin: 0;
	font-weight: 600;
}

.ek-filter__reset {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ek-link);
	font-size: var(--ek-fs-sm);
	text-decoration: underline;
	cursor: pointer;
}

.ek-filter__empty {
	margin: var(--ek-s-3) 0 0;
	padding: var(--ek-s-5);
	border-radius: var(--ek-r);
	background: var(--ek-surface-2);
	color: var(--ek-muted);
	text-align: center;
}

/* =====================================================================
 * Review šablon (single-casino.php)
 * ================================================================== */

.ek-review-hero {
	padding-block: var(--ek-s-4) var(--ek-s-6);
}

.ek-hero {
	display: grid;
	gap: var(--ek-s-5);
}

@media (min-width: 960px) {
	.ek-hero--media {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--ek-s-6);
	}
}

.ek-hero__info {
	display: grid;
	gap: var(--ek-s-4);
	min-width: 0;
}

.ek-hero__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-4);
}

/* Logo je transparentan; u tamnom heroju stoji na beloj pločici da se vidi i taman logo. */
.ek-hero__logo {
	display: inline-flex;
	flex: none;
	padding: 10px 14px;
	border-radius: var(--ek-r-lg);
	background: #fff;
}

.ek-hero__logo .ek-logo-box--text {
	color: var(--ek-text);
}

.ek-hero__head {
	min-width: 0;
}

.ek-hero__title {
	margin: 0;
	color: var(--ek-on-ink);
	overflow-wrap: anywhere;
}

.ek-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--ek-s-2);
}

.ek-hero__license {
	margin: 0;
	color: var(--ek-on-ink);
	font-size: var(--ek-fs-sm);
}

.ek-hero__license-label {
	color: var(--ek-on-ink-muted);
}

.ek-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ek-s-2);
	margin: 0;
}

@media (min-width: 640px) {
	.ek-metrics {
		gap: var(--ek-s-3);
	}
}

.ek-metrics__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--ek-s-3);
	border: 1px solid var(--ek-ink-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-ink-2);
}

.ek-metrics dt {
	color: var(--ek-on-ink-muted);
	font-size: var(--ek-fs-xs);
	line-height: 1.3;
}

.ek-metrics dd {
	margin: 0;
}

.ek-metrics .ek-rating--lg .ek-rating__value,
.ek-metrics__value {
	font-size: 1.375rem;
}

.ek-metrics .ek-rating--lg .ek-rating__star {
	width: 1.25rem;
	height: 1.25rem;
}

@media (min-width: 640px) {
	.ek-metrics .ek-rating--lg .ek-rating__value,
	.ek-metrics__value {
		font-size: 1.875rem;
	}
}

.ek-metrics__value {
	color: var(--ek-on-ink);
	line-height: 1;
}

.ek-metrics__item {
	min-width: 0;
}

/* Reč umesto broja („Kohe“, „Мгновенно“) mora da stane u uzanu kolonu na mobilnom. */
.ek-metrics .ek-metrics__value--text {
	font-size: var(--ek-fs-lg);
	line-height: 1.2;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.ek-metrics__note {
	display: block;
	margin-top: 4px;
	color: var(--ek-on-ink-muted);
	font-size: var(--ek-fs-xs);
	line-height: 1.3;
}

.ek-hero__offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-3) var(--ek-s-5);
	padding: var(--ek-s-4);
	border: 1px dashed var(--ek-gold);
	border-radius: var(--ek-r-lg);
	background: var(--ek-ink-2);
}

.ek-hero__bonus {
	display: flex;
	flex: 1 1 220px;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	line-height: 1.3;
}

.ek-hero__bonus-label {
	color: var(--ek-gold);
	font-size: var(--ek-fs-xs);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.ek-hero__bonus-amount {
	color: var(--ek-on-ink);
	font-size: 1.375rem;
}

.ek-hero__bonus-desc {
	color: var(--ek-on-ink-muted);
	font-size: var(--ek-fs-sm);
}

.ek-hero__offer .ek-tc {
	flex-basis: 100%;
}

.ek-dark .ek-tc,
.ek-dark .ek-tc a:not(.ek-btn) {
	color: var(--ek-on-ink-muted);
}

.ek-hero__banner {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--ek-r-lg);
	object-fit: cover;
}

/* Telo recenzije: sadržaj + sidebar (desktop desno, sticky). */
.ek-review {
	padding-block: var(--ek-s-5) var(--ek-s-7);
}

.ek-review > .ek-author {
	margin-bottom: var(--ek-s-5);
	padding-bottom: var(--ek-s-4);
	border-bottom: 1px solid var(--ek-line);
}

.ek-review__layout {
	display: grid;
	gap: var(--ek-s-5);
}

.ek-review__main {
	min-width: 0;
}

.ek-review__aside-bonus {
	display: none;
}

@media (min-width: 960px) {
	.ek-review__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
		gap: var(--ek-s-6);
	}

	.ek-review__aside {
		grid-column: 2;
		grid-row: 1;
		height: 100%;
	}

	.ek-review__main {
		grid-column: 1;
		grid-row: 1;
	}

	/* Uz ekran se drži samo TOC: bonus kartica + TOC su zajedno viši od ekrana, pa bi kraj TOC-a
	   bio nedostižan (i ispod sticky trake). Predugačak TOC ima svoj skrol. */
	.ek-review__sticky {
		display: grid;
		gap: var(--ek-s-4);
		height: 100%;
		align-content: start;
	}

	.ek-review__sticky .ek-toc {
		position: sticky;
		top: var(--ek-s-4);
		max-height: calc(100vh - 2 * var(--ek-s-4) - var(--ek-sticky-h, 0px));
		overflow-y: auto;
	}

	.ek-review__aside-bonus {
		display: block;
	}
}

.ek-review__section {
	margin-bottom: var(--ek-s-7);
	scroll-margin-top: var(--ek-s-4);
}

.ek-review__content h2 {
	scroll-margin-top: var(--ek-s-4);
}

.ek-review__title {
	margin-bottom: var(--ek-s-4);
}

.ek-opinion {
	padding: var(--ek-s-5);
	border-left: 4px solid var(--ek-gold);
	border-radius: 0 var(--ek-r-lg) var(--ek-r-lg) 0;
	background: var(--ek-surface);
}

.ek-opinion > :last-child {
	margin-bottom: 0;
}

/* Sklopivi TOC na mobilnom */
.ek-toc__toggle {
	display: none;
}

@media (max-width: 959.98px) {
	html.ek-js .ek-toc--collapsible {
		padding-block: var(--ek-s-2);
	}

	html.ek-js .ek-toc--collapsible .ek-toc__title {
		display: none;
	}

	html.ek-js .ek-toc--collapsible .ek-toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--ek-text);
		font-family: var(--ek-font-display);
		font-weight: 700;
		cursor: pointer;
	}

	.ek-toc--collapsible .ek-toc__toggle .ek-icon {
		transition: transform 0.2s;
	}

	.ek-toc--collapsible.is-open .ek-toc__toggle .ek-icon {
		transform: rotate(180deg);
	}

	html.ek-js .ek-toc--collapsible:not(.is-open) .ek-toc__list {
		display: none;
	}
}

/* Tabovi */
.ek-tabs__list {
	display: flex;
	gap: 2px;
	margin-bottom: var(--ek-s-4);
	overflow-x: auto;
	border-bottom: 1px solid var(--ek-line);
	scrollbar-width: thin;
}

.ek-tabs__tab {
	flex: none;
	min-height: 44px;
	margin-bottom: -1px;
	padding: 10px 14px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--ek-muted);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.ek-tabs__tab:hover {
	color: var(--ek-text);
}

.ek-tabs__tab.is-active {
	border-bottom-color: var(--ek-gold);
	color: var(--ek-text);
}

.ek-tabs__heading {
	margin-bottom: var(--ek-s-3);
}

html.ek-js .ek-tabs__panel:not(.is-active) {
	display: none;
}

html.ek-js .ek-tabs__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

html:not(.ek-js) .ek-tabs__list {
	display: none;
}

html:not(.ek-js) .ek-tabs__panel + .ek-tabs__panel {
	margin-top: var(--ek-s-5);
}

.ek-tabs__panel:focus {
	outline: none;
}

.ek-tabs__panel:focus-visible {
	outline: 2px solid var(--ek-gold);
	outline-offset: 4px;
}

/* Lista ključnih podataka */
.ek-info {
	display: grid;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
}

.ek-info__row {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) minmax(0, 1.6fr);
	gap: var(--ek-s-3);
	padding: 10px var(--ek-s-4);
	border-bottom: 1px solid var(--ek-line);
	font-size: var(--ek-fs-sm);
}

.ek-info__row:last-child {
	border-bottom: 0;
}

.ek-info dt {
	color: var(--ek-muted);
}

.ek-info dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ek-info + .ek-chips,
.ek-info + .ek-info__text,
.ek-info__more {
	margin-top: var(--ek-s-3);
}

.ek-info__more {
	margin-bottom: 0;
	font-size: var(--ek-fs-sm);
	font-weight: 600;
}

.ek-yn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ek-yn--yes .ek-icon {
	color: var(--ek-success);
}

.ek-yn--no .ek-icon {
	color: var(--ek-danger);
}

/* Tabela plaćanja (skrol na mobilnom) */
.ek-table-wrap {
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
}

.ek-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: var(--ek-fs-sm);
}

.ek-table th,
.ek-table td {
	padding: 10px var(--ek-s-4);
	border-bottom: 1px solid var(--ek-line);
	text-align: left;
	vertical-align: middle;
}

.ek-table tbody tr:last-child > * {
	border-bottom: 0;
}

.ek-table thead th {
	background: var(--ek-surface-2);
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.ek-table tbody th {
	font-weight: 600;
}

.ek-paytable__method {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

/* Igre po kategorijama */
.ek-gamecounts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
	gap: var(--ek-s-3);
	margin: 0 0 var(--ek-s-4);
	padding: 0;
	list-style: none;
}

.ek-gamecounts__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--ek-s-3) var(--ek-s-4);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
}

.ek-gamecounts__item--total {
	border-color: var(--ek-gold);
}

.ek-gamecounts__n {
	color: var(--ek-text);
	font-size: 1.375rem;
	line-height: 1.2;
}

/* Mobilni: dostupnost */
.ek-features {
	display: grid;
	gap: var(--ek-s-2);
	margin: 0 0 var(--ek-s-4);
	padding: 0;
	list-style: none;
}

.ek-features__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px var(--ek-s-4);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r);
	background: var(--ek-surface);
	font-weight: 600;
}

.ek-features__state {
	margin-left: auto;
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
	font-weight: 500;
}

.ek-features__item--yes .ek-icon {
	color: var(--ek-success);
}

.ek-features__item--no {
	color: var(--ek-muted);
}

.ek-features__item--no .ek-icon {
	color: var(--ek-danger);
}

/* Koraci registracije */
.ek-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ek-step;
}

.ek-steps__item {
	position: relative;
	min-height: 32px;
	margin-bottom: var(--ek-s-3);
	padding: 4px 0 0 48px;
	counter-increment: ek-step;
}

.ek-steps__item::before {
	content: counter(ek-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ek-gold);
	color: var(--ek-ink);
	font-weight: 800;
}

/* Link sa bonus kartice na podstranicu */
.ek-bonus__actions {
	display: flex;
	flex-direction: column;
	gap: var(--ek-s-2);
}

.ek-bonus__more {
	font-size: var(--ek-fs-sm);
	font-weight: 600;
	text-align: center;
}

.ek-grid--cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* =====================================================================
 * Hub /online-kasiinod/ i opšti tamni hero stranice
 * ================================================================== */

.ek-page-hero {
	padding-block: var(--ek-s-4) var(--ek-s-6);
}

.ek-page-hero__title {
	margin-bottom: var(--ek-s-3);
	color: var(--ek-on-ink);
}

.ek-page-hero__intro {
	max-width: 760px;
	margin-bottom: var(--ek-s-5);
	color: var(--ek-on-ink-muted);
	font-size: var(--ek-fs-lg);
}

.ek-page-hero__intro > :last-child {
	margin-bottom: 0;
}

.ek-hub {
	padding-block: var(--ek-s-6) var(--ek-s-7);
}

.ek-hub__section {
	margin-bottom: var(--ek-s-7);
	scroll-margin-top: var(--ek-s-4);
}

.ek-hub__title {
	margin-bottom: var(--ek-s-4);
}

.ek-hub__seo {
	max-width: var(--ek-container-narrow);
}

/* Poređenje: prva kolona fiksirana pri vodoravnom skrolu. */
.ek-compare {
	overflow-x: auto;
}

.ek-compare__table {
	min-width: 760px;
}

.ek-compare__sticky {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--ek-surface);
	box-shadow: 1px 0 0 var(--ek-line);
}

.ek-compare thead .ek-compare__sticky {
	background: var(--ek-surface-2);
}

.ek-compare__name {
	color: var(--ek-text);
	font-weight: 700;
	white-space: nowrap;
}

.ek-compare td {
	white-space: nowrap;
}

.ek-btn--sm {
	min-height: 36px;
	padding: 6px 14px;
	font-size: var(--ek-fs-sm);
}

/* =====================================================================
 * Početna (front-page.php)
 * ================================================================== */

.ek-home-hero {
	padding-block: var(--ek-s-6);
}

.ek-home-hero__inner {
	display: grid;
	gap: var(--ek-s-6);
}

@media (min-width: 960px) {
	.ek-home-hero__inner {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: center;
	}
}

.ek-home-hero__text,
.ek-home-hero__top {
	min-width: 0;
}

.ek-home-hero__title {
	margin-bottom: var(--ek-s-3);
	color: var(--ek-on-ink);
}

/* Mini top 3 */
.ek-mini {
	padding: var(--ek-s-4);
	border: 1px solid var(--ek-ink-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-ink-2);
}

.ek-mini__title {
	margin-bottom: var(--ek-s-3);
	color: var(--ek-gold);
	font-size: var(--ek-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ek-mini__list {
	display: grid;
	gap: var(--ek-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ek-mini__item {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	grid-template-areas:
		"rank logo info rating"
		"cta cta cta cta";
	align-items: center;
	gap: var(--ek-s-2) var(--ek-s-3);
	padding: var(--ek-s-3);
	border-radius: var(--ek-r);
	background: var(--ek-surface);
	color: var(--ek-text);
}

@media (min-width: 480px) {
	.ek-mini__item {
		grid-template-columns: auto auto minmax(0, 1fr) auto auto;
		grid-template-areas: "rank logo info rating cta";
	}
}

.ek-mini__rank {
	grid-area: rank;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ek-gold);
	color: var(--ek-ink);
	font-size: var(--ek-fs-sm);
	font-weight: 800;
}

.ek-mini__logo {
	grid-area: logo;
	display: inline-flex;
}

.ek-mini__info {
	grid-area: info;
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.ek-mini__name {
	color: var(--ek-text);
	font-weight: 700;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.ek-dark .ek-mini__name {
	color: var(--ek-text);
}

.ek-mini__bonus {
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
}

.ek-mini__item .ek-rating {
	grid-area: rating;
}

.ek-mini__item .ek-rating__max {
	color: var(--ek-muted);
}

.ek-mini__cta {
	grid-area: cta;
}

/* Sekcije početne */
.ek-home {
	padding-block: var(--ek-s-6) var(--ek-s-7);
}

.ek-home__section {
	margin-bottom: var(--ek-s-7);
	scroll-margin-top: var(--ek-s-4);
}

.ek-home__title {
	margin-bottom: var(--ek-s-4);
}

.ek-home__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ek-s-2) var(--ek-s-4);
}

.ek-home__updated {
	margin: 0 0 var(--ek-s-4);
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
}

.ek-home__more {
	margin: var(--ek-s-5) 0 0;
	text-align: center;
}

.ek-home__seo {
	max-width: var(--ek-container-narrow);
}

/* Linkovi ka hubovima i vodičima */
.ek-linkgrid__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: var(--ek-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ek-linkgrid__list > li {
	min-width: 0;
}

.ek-linkgrid__list a {
	display: block;
	height: 100%;
	padding: var(--ek-s-4);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
	color: var(--ek-text);
	font-weight: 600;
	text-decoration: none;
}

.ek-linkgrid__list a:hover {
	border-color: var(--ek-gold);
}

/* Blokovi „tekst + ilustracija“ iz editora (core block CSS se ne učitava) */
.ek-prose .wp-block-media-text {
	display: grid;
	gap: var(--ek-s-4);
	align-items: center;
}

.ek-prose .wp-block-media-text__media img {
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.ek-prose .wp-block-media-text {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--ek-s-6);
	}

	.ek-prose .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
		order: 2;
	}
}

.ek-prose .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ek-s-5);
}

.ek-prose .wp-block-column {
	flex: 1 1 260px;
	min-width: 0;
}

/* =====================================================================
 * Brend podstranica (template-parts/review/subpage.php)
 * ================================================================== */

.ek-sub-hero {
	padding-block: var(--ek-s-4) var(--ek-s-6);
}

.ek-sub-hero__grid {
	display: grid;
	gap: var(--ek-s-5);
}

@media (min-width: 960px) {
	.ek-sub-hero__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--ek-s-6);
	}
}

.ek-sub-hero__info {
	display: grid;
	gap: var(--ek-s-4);
	min-width: 0;
}

.ek-sub-hero__bonus {
	min-width: 0;
}

/* Bonus kartica na tamnoj podlozi ostaje svetla (tekst kartice u svetlim bojama). */
.ek-sub-hero__bonus .ek-bonus {
	color: var(--ek-text);
}

.ek-sub-hero__bonus .ek-bonus a:not(.ek-btn) {
	color: var(--ek-link);
}

.ek-sub-hero__bonus .ek-tc,
.ek-sub-hero__bonus .ek-tc a:not(.ek-btn) {
	color: var(--ek-muted);
}

.ek-hero__head .ek-rating {
	margin-top: var(--ek-s-2);
}

.ek-metrics--compact {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 420px;
}

.ek-sub-hero__back {
	margin: 0;
	font-size: var(--ek-fs-sm);
	font-weight: 600;
}

.ek-bonus--empty {
	gap: var(--ek-s-3);
}

.ek-sub {
	padding-block: var(--ek-s-6) var(--ek-s-7);
}

.ek-sub__section {
	margin-bottom: var(--ek-s-7);
	scroll-margin-top: var(--ek-s-4);
}

.ek-sub__title {
	margin-bottom: var(--ek-s-4);
}

.ek-sub__content {
	max-width: var(--ek-container-narrow);
}

.ek-sub__section .ek-info + .ek-tc {
	margin-top: var(--ek-s-3);
}

.ek-sub__cta {
	margin: var(--ek-s-4) 0 0;
}

.ek-sub__review {
	padding: var(--ek-s-5);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
}

.ek-sub__review-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-4);
	margin-bottom: var(--ek-s-4);
}

.ek-sub__review-head .ek-sub__title {
	margin-bottom: var(--ek-s-1);
}

.ek-sub__review-link {
	margin: var(--ek-s-4) 0 0;
}

/* Bonus hub: lista širokih kartica; chipovi kategorija u tamnom heroju */
.ek-bonus-list {
	display: grid;
	gap: var(--ek-s-4);
}

.ek-bonus-list > * {
	min-width: 0;
}

.ek-page-hero .ek-catchips {
	margin-top: var(--ek-s-5);
}

/* =====================================================================
 * Blog, članak, statične stranice, autor
 * ================================================================== */

.ek-grid--posts {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.ek-pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
	box-shadow: var(--ek-shadow-1);
}

.ek-pcard__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ek-surface-2);
}

.ek-pcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ek-pcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ek-s-2);
	padding: var(--ek-s-4) var(--ek-s-5) var(--ek-s-5);
}

.ek-pcard__cat {
	align-self: flex-start;
	color: var(--ek-gold-ink);
	font-size: var(--ek-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.ek-dark .ek-pcard__cat--dark {
	display: inline-block;
	margin-bottom: var(--ek-s-2);
	color: var(--ek-gold);
}

.ek-pcard__title {
	margin: 0;
	font-size: var(--ek-fs-lg);
	line-height: 1.3;
}

.ek-pcard__title a {
	color: var(--ek-text);
	text-decoration: none;
}

.ek-pcard__title a:hover {
	color: var(--ek-link);
}

.ek-pcard__excerpt {
	margin: 0;
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
}

.ek-pcard__meta {
	margin: auto 0 0;
	padding-top: var(--ek-s-2);
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
}

/* Članak i statične stranice: sadržaj + TOC sidebar */
.ek-article {
	display: grid;
	gap: var(--ek-s-5);
	padding-block: var(--ek-s-6) var(--ek-s-7);
}

.ek-article__main,
.ek-article__aside {
	min-width: 0;
}

@media (min-width: 960px) {
	.ek-article--toc {
		grid-template-columns: minmax(0, var(--ek-container-narrow)) 280px;
		justify-content: center;
		align-items: start;
		gap: var(--ek-s-7);
	}

	.ek-article--toc .ek-article__aside {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: var(--ek-s-4);
	}

	.ek-article--toc .ek-article__main {
		grid-column: 1;
		grid-row: 1;
	}
}

.ek-article .ek-prose h2 {
	scroll-margin-top: var(--ek-s-4);
}

.ek-article__media {
	margin: 0 0 var(--ek-s-5);
}

.ek-article__img {
	width: 100%;
	height: auto;
	border-radius: var(--ek-r-lg);
}

.ek-article__read {
	margin: var(--ek-s-3) 0 0;
	color: var(--ek-on-ink-muted);
	font-size: var(--ek-fs-sm);
}

.ek-page-hero .ek-author + .ek-article__read {
	margin-top: var(--ek-s-2);
}

/* Vastutustundlik mäng: blok pomoći iznad sadržaja */
.ek-rgbox {
	margin-bottom: var(--ek-s-5);
	padding: var(--ek-s-5);
	border-left: 4px solid var(--ek-success);
	border-radius: 0 var(--ek-r-lg) var(--ek-r-lg) 0;
	background: var(--ek-success-bg);
}

.ek-rgbox__age {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-2);
	font-weight: 600;
}

.ek-rgbox .ek-age-badge {
	color: var(--ek-danger);
}

.ek-rgbox .ek-footer__title {
	margin-bottom: var(--ek-s-2);
	color: var(--ek-text);
	font-weight: 700;
}

.ek-rgbox .ek-help p:last-child {
	margin-bottom: 0;
}

/* Autor stranica */
.ek-profile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-4) var(--ek-s-5);
	margin-bottom: var(--ek-s-4);
}

.ek-profile__photo {
	flex: none;
	width: 112px;
	height: 112px;
	border: 3px solid var(--ek-gold);
	border-radius: 50%;
	object-fit: cover;
}

.ek-profile__text {
	min-width: 0;
}

.ek-profile__text .ek-page-hero__title {
	margin-bottom: var(--ek-s-1);
}

.ek-profile__role {
	margin: 0 0 var(--ek-s-2);
	color: var(--ek-gold);
	font-weight: 600;
}

.ek-profile__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ek-s-3);
	margin: 0 0 var(--ek-s-2);
	color: var(--ek-on-ink-muted);
	font-size: var(--ek-fs-sm);
}

.ek-profile__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ek-s-3);
	margin: 0;
	padding: 0;
	font-size: var(--ek-fs-sm);
	list-style: none;
}

/* =====================================================================
 * Sticky bar, Telegram, ocene igrača (faza 9)
 * ================================================================== */

/* Sticky bar: traka na dnu ekrana (fixed, ne pomera layout). */
.ek-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	padding-bottom: env(safe-area-inset-bottom, 0);
	border-top: 1px solid var(--ek-ink-line);
	background: var(--ek-ink);
	box-shadow: 0 -6px 20px rgba(13, 6, 22, 0.25);
	color: var(--ek-on-ink);
}

.ek-sticky__inner {
	display: flex;
	align-items: center;
	gap: var(--ek-s-3);
	min-height: 56px;
	padding-block: 6px;
}

.ek-sticky__tag {
	flex: none;
}

.ek-sticky__logo {
	display: inline-flex;
	flex: none;
	padding: 3px 6px;
	border-radius: var(--ek-r-sm);
	background: #fff;
}

.ek-sticky__logo .ek-logo-box--text {
	color: var(--ek-text);
}

.ek-sticky__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.ek-sticky__name {
	overflow: hidden;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ek-sticky__bonus {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var(--ek-gold);
	font-size: var(--ek-fs-sm);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ek-sticky__cta {
	flex: none;
}

.ek-sticky__age {
	flex: none;
	color: var(--ek-on-ink-muted);
	font-size: var(--ek-fs-xs);
	font-weight: 700;
}

.ek-sticky__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ek-on-ink-muted);
	cursor: pointer;
}

.ek-sticky__close:hover {
	background: var(--ek-ink-2);
	color: var(--ek-on-ink);
}

/* Mobilni: tanka traka – logo, bonus, CTA, 21+, zatvaranje. */
@media (max-width: 639.98px) {
	.ek-sticky__inner {
		gap: var(--ek-s-2);
		min-height: 52px;
	}

	.ek-sticky__tag,
	.ek-sticky__info {
		display: none;
	}
}

@media (min-width: 960px) {
	.ek-sticky__bonus {
		font-size: var(--ek-fs-base);
	}
}

/* Dok je traka vidljiva, dno stranice (footer) se ne skriva ispod nje. */
html.ek-sticky-on body {
	padding-bottom: var(--ek-sticky-h, 56px);
}

/* Telegram: plutajuće dugme (iznad sticky trake kad je vidljiva). */
.ek-tg-fab {
	position: fixed;
	right: var(--ek-s-4);
	bottom: calc(var(--ek-s-4) + env(safe-area-inset-bottom, 0));
	z-index: 59;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #229ed9;
	box-shadow: var(--ek-shadow-2);
	color: #fff;
	transition: bottom 0.2s, transform 0.15s;
}

.ek-tg-fab:hover {
	transform: scale(1.06);
	color: #fff;
}

html.ek-sticky-on .ek-tg-fab {
	bottom: calc(var(--ek-sticky-h, 56px) + var(--ek-s-3));
}

/* Telegram popup: centrirani modal; na mobilnom bottom sheet (ne preko celog ekrana). */
.ek-tg {
	width: calc(100% - 2 * var(--ek-s-4));
	max-width: 400px;
	padding: 0;
	border: 0;
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
	box-shadow: var(--ek-shadow-2);
	color: var(--ek-text);
}

.ek-tg::backdrop {
	background: rgba(13, 6, 22, 0.6);
}

.ek-tg__box {
	position: relative;
	padding: var(--ek-s-6) var(--ek-s-5) var(--ek-s-5);
	text-align: center;
}

.ek-tg__close {
	position: absolute;
	top: var(--ek-s-2);
	right: var(--ek-s-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ek-muted);
	cursor: pointer;
}

.ek-tg__close:hover {
	background: var(--ek-surface-2);
	color: var(--ek-text);
}

.ek-tg__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--ek-s-3);
	border-radius: 50%;
	background: #229ed9;
	color: #fff;
}

.ek-tg__title {
	margin-bottom: var(--ek-s-2);
	font-family: var(--ek-font-display);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
}

.ek-tg__text {
	color: var(--ek-muted);
}

.ek-tg__age {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ek-s-2);
	margin: var(--ek-s-3) 0 0;
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
}

@media (max-width: 639.98px) {
	.ek-tg {
		width: 100%;
		max-width: 100%;
		max-height: 85vh;
		margin: auto 0 0;
		border-radius: var(--ek-r-lg) var(--ek-r-lg) 0 0;
	}

	.ek-tg__box {
		padding-bottom: calc(var(--ek-s-5) + env(safe-area-inset-bottom, 0));
	}
}

/* Ocene igrača */
.ek-notice {
	margin-bottom: var(--ek-s-4);
	padding: var(--ek-s-3) var(--ek-s-4);
	border-radius: var(--ek-r);
	font-weight: 600;
}

.ek-notice--ok {
	background: var(--ek-success-bg);
	color: var(--ek-success);
}

.ek-notice--error {
	background: var(--ek-danger-bg);
	color: var(--ek-danger);
}

.ek-reviews__summary {
	margin-bottom: var(--ek-s-4);
}

.ek-reviews__list {
	display: grid;
	gap: var(--ek-s-3);
	margin: 0 0 var(--ek-s-5);
	padding: 0;
	list-style: none;
}

.ek-review-item {
	padding: var(--ek-s-4);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface);
}

.ek-review-item__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-2) var(--ek-s-3);
	margin-bottom: var(--ek-s-2);
}

.ek-review-item__name {
	font-weight: 700;
}

.ek-review-item__date {
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
}

.ek-review-item__head .ek-rating {
	margin-left: auto;
}

.ek-review-item__text > :last-child {
	margin-bottom: 0;
}

.ek-rate {
	padding: var(--ek-s-5);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r-lg);
	background: var(--ek-surface-2);
}

.ek-rate__title {
	font-family: var(--ek-font-display);
	font-size: var(--ek-fs-lg);
	font-weight: 700;
}

.ek-rate__grid {
	display: grid;
	gap: 0 var(--ek-s-4);
}

@media (min-width: 640px) {
	.ek-rate__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ek-rate__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ek-rate__field label {
	font-size: var(--ek-fs-sm);
	font-weight: 600;
}

.ek-rate input,
.ek-rate select,
.ek-rate textarea {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-r);
	background: var(--ek-surface);
	color: var(--ek-text);
	font: inherit;
}

.ek-rate textarea {
	resize: vertical;
}

/* Honeypot: van ekrana i van redosleda tabulatora. */
.ek-rate__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ek-rate__note {
	color: var(--ek-muted);
	font-size: var(--ek-fs-sm);
}

/* Preview stranica (/ek-preview/, samo administrator) */
.ek-preview__hero h1 {
	margin-top: var(--ek-s-4);
}

.ek-preview__note {
	margin-bottom: var(--ek-s-6);
	padding: var(--ek-s-3) var(--ek-s-4);
	border: 1px solid #e6c200;
	border-radius: var(--ek-r);
	background: #fff8db;
	font-size: var(--ek-fs-sm);
}

.ek-preview__note p {
	margin-bottom: var(--ek-s-2);
}

.ek-preview__note p:last-child {
	margin-bottom: 0;
}

.ek-preview__layout {
	display: grid;
	gap: var(--ek-s-6);
}

@media (min-width: 1100px) {
	.ek-preview__layout {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}

	.ek-preview__aside {
		position: sticky;
		top: var(--ek-s-4);
	}
}

.ek-preview__section {
	margin-bottom: var(--ek-s-7);
	scroll-margin-top: var(--ek-s-4);
}

.ek-preview__name {
	display: inline-block;
	margin-bottom: var(--ek-s-4);
	padding: 4px 12px;
	border-radius: var(--ek-r-sm);
	background: var(--ek-ink);
	color: var(--ek-gold);
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: var(--ek-fs-base);
	font-weight: 600;
}

.ek-preview__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ek-s-5);
	margin-bottom: var(--ek-s-4);
}

.ek-preview__label {
	margin: var(--ek-s-5) 0 var(--ek-s-2);
	color: var(--ek-muted);
	font-size: var(--ek-fs-xs);
}

/* Pomoćne klase -------------------------------------------------------- */

.ek-stack > * + * {
	margin-top: var(--ek-s-4);
}

.ek-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}