/*
 * Marra – izgled stranice za prijavu i registraciju (dodatak Sleek Auth).
 * Fontovi i boje teme, uglati rubovi, samo svijetli način.
 * "body .sa-root" nadjačava stilove dodatka bez !important.
 */

body.sleek-auth-body {
	background: var(--marra-ivory);
}

/* Varijable dodatka → tokeni teme (i u tamnom načinu sustava) */
body .sa-root,
body .sa-root[class] {
	--sa-accent: var(--marra-black);
	--sa-on-accent: var(--marra-cream);
	--sa-bg: var(--marra-ivory);
	--sa-field: var(--marra-white);
	--sa-field-hover: var(--marra-white);
	--sa-line: var(--marra-line);
	--sa-ink: var(--marra-black);
	--sa-muted: var(--marra-muted);
	--sa-error: #9b2c22;
	--sa-error-bg: #f6e9e5;
	--sa-success: #3f5a3a;
	--sa-success-bg: var(--marra-sage);
	--sa-info-bg: var(--marra-cream);
	--sa-ring: transparent;
	--sa-radius: 0;
	--sa-font: var(--marra-font-body);
	font-size: 15px;
}

@media (prefers-color-scheme: dark) {
	body .sa-root {
		--sa-bg: var(--marra-ivory);
		--sa-field: var(--marra-white);
		--sa-field-hover: var(--marra-white);
		--sa-line: var(--marra-line);
		--sa-ink: var(--marra-black);
		--sa-muted: var(--marra-muted);
		--sa-error: #9b2c22;
		--sa-error-bg: #f6e9e5;
		--sa-success: #3f5a3a;
		--sa-success-bg: var(--marra-sage);
		color-scheme: light;
	}
}

/* Strana sa slikom: topli tamni prijelaz, naslov u fontu teme */
body .sa-root .sa-media::after {
	background: linear-gradient(to top, rgba(30, 22, 16, 0.62), rgba(30, 22, 16, 0));
}

body .sa-root .sa-art::after {
	display: none;
}

body .sa-root .sa-media-headline {
	font-family: var(--marra-font-display);
	font-size: clamp(30px, 3vw, 44px);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.08;
	text-transform: uppercase;
}

body .sa-root .sa-media-text {
	color: var(--marra-on-dark-soft);
	font-size: 15px;
	font-weight: 300;
}

/* Logo */
body .sa-root .sa-brand .sa-logo {
	height: 46px;
	max-height: none;
	max-width: 160px;
	width: auto;
}

/* Uglati rubovi slike (dodatak ima zaobljenu karticu) */
body .sa-root .sa-media,
body .sa-root .sa-media-img,
body .sa-root .sa-art {
	border-radius: 0;
}

/* Gumb "Prikaži lozinku": bez stilova gumba teme */
body .sa-root .sa-reveal {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--marra-muted);
	letter-spacing: 0;
	padding: 0;
}

body .sa-root .sa-reveal:hover,
body .sa-root .sa-reveal:focus-visible {
	background: transparent;
	color: var(--marra-black);
}

body .sa-root .sa-back {
	color: var(--marra-muted);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Naslovi */
body .sa-root .sa-title {
	font-family: var(--marra-font-display);
	font-size: clamp(30px, 3vw, 40px);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.05;
	text-transform: uppercase;
}

body .sa-root .sa-subtitle {
	font-size: 15px;
	font-weight: 300;
}

/* Polja */
body .sa-root label,
body .sa-root .sa-label-row label {
	color: var(--marra-black);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--marra-tracking-label);
	text-transform: uppercase;
}

body .sa-root .sa-input {
	background: var(--marra-white);
	border: 1px solid var(--marra-line);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--marra-font-body);
	font-size: 15px;
	transition: border-color var(--marra-transition);
}

body .sa-root .sa-input:hover {
	border-color: var(--marra-champagne);
}

body .sa-root .sa-input:focus,
body .sa-root .sa-input:focus-visible {
	border-color: var(--marra-caramel);
	box-shadow: none;
	outline: none;
}

body .sa-root .sa-field.has-error .sa-input {
	border-color: var(--sa-error);
}

/* Gumbi: kao u trgovini (veliko slovo, razmak, crna → kakao) */
body .sa-root .sa-btn {
	background: var(--marra-black);
	border-radius: 0;
	box-shadow: none;
	font: 500 13px/1 var(--marra-font-body);
	height: 52px;
	letter-spacing: var(--marra-tracking-button);
	text-transform: uppercase;
	transition: background-color 0.3s ease;
}

body .sa-root .sa-btn:hover,
body .sa-root .sa-btn:focus-visible {
	background: #7a5236;
}

body .sa-root .sa-btn--ghost {
	background: transparent;
	border: 1px solid var(--marra-black);
	color: var(--marra-black) !important;
}

body .sa-root .sa-btn--ghost:hover,
body .sa-root .sa-btn--ghost:focus-visible {
	background: var(--marra-black);
	color: var(--marra-cream) !important;
}

/* Linkovi */
body .sa-root .sa-link,
body .sa-root .sa-alt a,
body .sa-root .sa-legal a {
	color: var(--marra-black) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body .sa-root .sa-link:hover,
body .sa-root .sa-alt a:hover {
	color: var(--marra-caramel) !important;
}

/* Prekidač Prijava / Registracija */
body .sa-root .sa-switch {
	background: var(--marra-cream);
	border-radius: 0;
}

body .sa-root .sa-switch-thumb {
	background: var(--marra-white);
	border-radius: 0;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.08);
}

/* Kvačice */
body .sa-root .sa-check {
	color: var(--marra-ink);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

body .sa-root .sa-check-box {
	border-radius: 0;
}

/* Prijava na Marra pisma */
body .sa-root .marra-auth-optin {
	margin: 4px 0 6px;
}

/* Obavijesti */
body .sa-root .sa-notice {
	border-radius: 0;
	font-size: 14px;
}

/* Mjerač jačine lozinke */
body .sa-root .sa-meter {
	border-radius: 0;
}

body .sa-root .sa-legal,
body .sa-root .sa-hint {
	color: var(--marra-muted);
	font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
	body .sa-root .sa-btn {
		transition: none;
	}
}