/*
UlaPoint Affiliate — frontend styling.
Varijable ispod repliciraju paletu i tipografiju s postojeće ulapoint.eu
prodajne stranice (Fraunces + Instrument Sans, petrol/pergament/mesing).
Ako je tema u međuvremenu promijenila fontove ili boje, prilagodi vrijednosti
ovdje, ne diraj markup u view datotekama.
*/

/*
── WP/PAGE-BUILDER NASLOV — SIGURNOSNA MREŽA ──
Ovaj CSS se učitava isključivo na stranicama koje sadrže naš shortcode
(vidi maybe_enqueue_assets() u class-ulapoint-aff-public.php), pa je
sigurno ovdje sakriti generički naslov stranice bez rizika da to utječe
na bilo koju drugu stranicu weba. Ovo je BACKUP za slučaj da "Hide Title"
opcija u Elementor postavkama stranice (Page Settings → Page Layout →
Hide Title) nije uključena. Elementor postavka je ispravan, primarni
način rješavanja duplog naslova; ovaj CSS pokriva najčešće selektore
teme kao dodatnu sigurnost. Ne utječe na H1 unutar ulapoint-aff-hero.
*/
body:has(.ulapoint-aff-wrap) .entry-header,
body:has(.ulapoint-aff-wrap) .page-header,
body:has(.ulapoint-aff-wrap) .entry-title,
body:has(.ulapoint-aff-wrap) .page-title,
body:has(.ulapoint-aff-wrap) .elementor-page-title {
	display: none !important;
}

.ulapoint-aff-wrap, .ulapoint-aff-wrap * { box-sizing: border-box; }
.ulapoint-aff-wrap img { max-width: 100%; height: auto; }

/*
Sigurnosna mreža: bilo koji budući element unutar dashboarda/registracije
koji dobije eksplicitni `display` u CSS-u (flex/grid/block) i pritom nosi
`hidden` atribut mora ostati vizualno skriven. Scopirano isključivo na
.ulapoint-aff-wrap, ne dira ostatak weba niti temu.
*/
.ulapoint-aff-wrap [hidden] {
	display: none !important;
}

.ulapoint-aff-wrap {
	--ua-ink: #0D2B2D;
	--ua-teal: #187F84;
	--ua-teal-deep: #0F5E62;
	--ua-teal-wash: #E4F0EF;
	--ua-brass: #A98B5F;
	--ua-paper: #F6F2EA;
	--ua-white: #FCFAF5;
	--ua-muted: #5E5B52;
	--ua-line: #DCD4C6;
	--ua-serif: 'Fraunces', Georgia, serif;
	--ua-sans: 'Instrument Sans', -apple-system, sans-serif;

	max-width: 900px;
	margin: 0 auto;
	padding: 24px 24px 60px;
	font-family: var(--ua-sans);
	color: var(--ua-ink);
}
@media (max-width: 480px) {
	.ulapoint-aff-wrap { padding: 20px 18px 48px; }
}

.ulapoint-aff-card {
	background: var(--ua-white);
	border: 1px solid var(--ua-line);
	border-radius: 3px;
	padding: 44px 48px;
	margin-bottom: 24px;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ── HERO ── */
.ulapoint-aff-hero {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 56px;
	align-items: center;
	margin: 10px 0 56px;
}

.ulapoint-aff-hero-title {
	font-family: var(--ua-serif);
	font-size: clamp(2.1rem, 4vw, 3.1rem);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ua-ink);
	margin: 0 0 20px;
}
.ulapoint-aff-hero-title em {
	font-style: italic;
	font-weight: 300;
	color: var(--ua-teal);
}

.ulapoint-aff-hero-lead {
	font-family: var(--ua-serif);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--ua-brass);
	margin: 0 0 16px;
	line-height: 1.5;
}

.ulapoint-aff-hero-sub {
	font-size: 0.96rem;
	color: var(--ua-muted);
	line-height: 1.8;
	max-width: 460px;
	margin: 0;
}

.ulapoint-aff-hero-panel {
	background: var(--ua-ink);
	color: var(--ua-paper);
	border-radius: 3px;
	padding: 40px 34px;
	position: relative;
}
.ulapoint-aff-panel-badge {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ua-brass);
	border: 1px solid rgba(169,139,95,0.4);
	border-radius: 100px;
	padding: 4px 14px;
	margin-bottom: 22px;
}
.ulapoint-aff-panel-rate {
	font-family: var(--ua-serif);
	font-size: 3.1rem;
	font-weight: 400;
	line-height: 1;
	color: var(--ua-paper);
}
.ulapoint-aff-panel-rate span { font-size: 1.6rem; color: var(--ua-brass); }
.ulapoint-aff-panel-rate-label {
	font-size: 0.82rem;
	color: rgba(246,242,234,0.6);
	margin: 8px 0 26px;
}
.ulapoint-aff-panel-list { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid rgba(246,242,234,0.14); display: flex; flex-direction: column; gap: 16px; }
.ulapoint-aff-panel-list li { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; color: rgba(246,242,234,0.85); }
.ulapoint-aff-panel-icon {
	width: 26px; height: 26px;
	border: 1px solid rgba(169,139,95,0.5);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--ua-serif);
	font-style: italic;
	font-size: 0.82rem;
	color: var(--ua-brass);
	flex-shrink: 0;
}

/*
Tablet (768–900px): hero namjerno prelazi u jednu kolonu ranije nego što bi
"desktop" pravilo dopuštalo. Dvije kolone na 768–900px širine daju stupac
teksta od svega ~380px i karticu od ~300px, što izgleda stisnuto i ni kao
desktop ni kao mobitel. Puna dva-stupca izgleda tek od 900px naviše, gdje
oba stupca imaju dovoljno prostora da naslov i kartica dišu.
*/
@media (max-width: 900px) {
	.ulapoint-aff-hero {
		grid-template-columns: 1fr;
		gap: 28px;
		margin: 4px 0 40px;
	}
	.ulapoint-aff-hero-sub { max-width: none; }
	.ulapoint-aff-card { padding: 32px 26px; }
}

@media (max-width: 640px) {
	.ulapoint-aff-hero { gap: 24px; margin-bottom: 32px; }
	.ulapoint-aff-hero-title {
		/* Cilj ~38–46px na mobitelu: clamp donja granica 2.15rem (~34px)
		   raste do 2.6rem (~42px) ovisno o viewportu, bez lomljenja
		   pojedinačnih riječi jer naslov već ide u tri kratka retka. */
		font-size: clamp(2.15rem, 9vw, 2.6rem);
		line-height: 1.18;
		margin-bottom: 14px;
	}
	.ulapoint-aff-hero-lead { font-size: 1.02rem; margin-bottom: 12px; }
	.ulapoint-aff-hero-sub { font-size: 0.92rem; line-height: 1.7; }

	.ulapoint-aff-hero-panel { padding: 30px 24px; }
	.ulapoint-aff-panel-rate { font-size: clamp(2.4rem, 11vw, 3rem); }
	.ulapoint-aff-panel-rate-label { font-size: 0.8rem; margin-bottom: 20px; }
	.ulapoint-aff-panel-list { gap: 14px; padding-top: 18px; }
	.ulapoint-aff-panel-list li { font-size: 0.87rem; }

	.ulapoint-aff-card {
		padding: 26px 20px;
		border-radius: 3px;
		max-width: 100%;
	}
}

.ulapoint-aff-eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ua-brass);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.ulapoint-aff-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--ua-brass); }

.ulapoint-aff-title {
	font-family: var(--ua-serif);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 400;
	margin: 0 0 8px;
	color: var(--ua-ink);
}

.ulapoint-aff-subtitle {
	font-family: var(--ua-serif);
	font-size: 1.3rem;
	font-weight: 500;
	margin: 0 0 18px;
}

.ulapoint-aff-lead {
	color: var(--ua-muted);
	font-size: 0.94rem;
	line-height: 1.7;
	margin-bottom: 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--ua-line);
}

.ulapoint-aff-form { display: flex; flex-direction: column; gap: 18px; }
.ulapoint-aff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .ulapoint-aff-row { grid-template-columns: 1fr; gap: 16px; } }

.ulapoint-aff-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ulapoint-aff-field label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ua-muted);
}
.ulapoint-aff-field input,
.ulapoint-aff-field textarea {
	padding: 15px 16px;
	border: 1px solid var(--ua-line);
	background: var(--ua-white);
	font-family: var(--ua-sans);
	font-size: 1rem;
	border-radius: 3px;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.ulapoint-aff-field input:focus,
.ulapoint-aff-field textarea:focus {
	outline: none;
	border-color: var(--ua-teal-deep);
	box-shadow: 0 0 0 3px rgba(15,94,98,0.1);
}
.ulapoint-aff-field textarea { min-height: 130px; resize: vertical; }

.ulapoint-aff-consent {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--ua-paper);
	border: 1px solid var(--ua-line);
	border-radius: 3px;
	padding: 18px 20px;
	margin-top: 4px;
}

@media (max-width: 640px) {
	.ulapoint-aff-lead { margin-bottom: 22px; padding-bottom: 18px; font-size: 0.9rem; }
	.ulapoint-aff-form { gap: 16px; }
	.ulapoint-aff-field input,
	.ulapoint-aff-field textarea {
		/* 16px minimum sprječava iOS Safari da automatski zumira formu pri fokusu. */
		font-size: 16px;
		min-height: 48px;
		padding: 13px 14px;
	}
	.ulapoint-aff-field textarea { min-height: 120px; }
	.ulapoint-aff-consent { padding: 16px 16px; gap: 14px; }
}

.ulapoint-aff-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.85rem;
	color: var(--ua-ink-soft, var(--ua-muted));
	cursor: pointer;
	line-height: 1.5;
}
.ulapoint-aff-checkbox input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--ua-teal-deep);
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.ulapoint-aff-checkbox {
		gap: 12px;
		font-size: 0.87rem;
	}
	.ulapoint-aff-checkbox input {
		/* Malo veći dodirni cilj i poravnanje točno uz vrh prvog retka teksta,
		   da red ostane čitljiv i lako klikabilan na dodirnom ekranu. */
		width: 19px;
		height: 19px;
		margin-top: 2px;
	}
}

.ulapoint-aff-btn {
	display: inline-block;
	/* Eksplicitan hex kao fallback uz CSS varijablu, plus !important:
	   ovo je isti CTA karakter kao "NARUČI ODMAH" na glavnom webu
	   (teal-deep pozadina, ink na hover), a !important je ovdje namjerno
	   jer neke WordPress teme/blok stilovi (globalni .wp-element-button
	   ili slično) znaju pregaziti pozadinsku boju dugmadi i pretvoriti
	   je u temeljenu (skoro crnu) default boju teme. Ovo osigurava da
	   gumb uvijek ostane UlaPoint teal, neovisno o temi. */
	background: var(--ua-teal-deep, #0F5E62) !important;
	color: var(--ua-white) !important;
	border: 1px solid var(--ua-teal-deep, #0F5E62) !important;
	border-radius: 100px;
	padding: 17px 40px;
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s;
}
.ulapoint-aff-btn:hover,
.ulapoint-aff-btn:focus-visible {
	background: var(--ua-ink, #0D2B2D) !important;
	border-color: var(--ua-ink, #0D2B2D) !important;
	color: var(--ua-white) !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(13,43,45,0.2);
}
.ulapoint-aff-btn:focus-visible { outline: 2px solid var(--ua-brass); outline-offset: 3px; }
.ulapoint-aff-btn-block { width: 100%; text-align: center; margin-top: 6px; }
.ulapoint-aff-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.ulapoint-aff-form-note {
	font-size: 0.78rem;
	color: var(--ua-muted);
	text-align: center;
	margin: 12px 0 0;
}

@media (max-width: 640px) {
	.ulapoint-aff-btn { padding: 16px 28px; font-size: 0.86rem; min-height: 52px; }
	.ulapoint-aff-form-note { font-size: 0.8rem; margin-top: 14px; }
}

.ulapoint-aff-message {
	padding: 14px 18px;
	border-radius: 3px;
	margin-bottom: 20px;
	font-size: 0.9rem;
}
.ulapoint-aff-message.success { background: var(--ua-teal-wash); color: var(--ua-teal-deep); }
.ulapoint-aff-message.error { background: #FBEAEA; color: #8B1A1A; }

.ulapoint-aff-notice {
	max-width: 600px;
	margin: 40px auto;
	text-align: center;
	padding: 30px;
	border: 1px solid var(--ua-line);
	border-radius: 3px;
	background: var(--ua-white);
}

/* Dashboard */
.ulapoint-aff-copy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 30px; }
@media (max-width: 640px) { .ulapoint-aff-copy-row { grid-template-columns: 1fr; } }
.ulapoint-aff-copy-box label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ua-muted);
	margin-bottom: 6px;
}
.ulapoint-aff-copy-field { display: flex; gap: 8px; }
.ulapoint-aff-copy-field input {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid var(--ua-line);
	border-radius: 3px;
	background: var(--ua-paper);
	font-family: var(--ua-sans);
	font-size: 0.88rem;
	color: var(--ua-ink);
}
.ulapoint-aff-copy-btn {
	background: var(--ua-ink);
	color: var(--ua-white);
	border: none;
	border-radius: 3px;
	padding: 0 18px;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.ulapoint-aff-copy-btn:hover { background: var(--ua-teal-deep); }

/* Promjena promo koda: diskretan link ispod copy-boxa, otvara inline formu */
.ulapoint-aff-link-btn {
	background: none;
	border: none;
	padding: 0;
	margin-top: 8px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ua-teal-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ulapoint-aff-link-btn:hover { color: var(--ua-ink); }

.ulapoint-aff-promo-form {
	margin-top: 12px;
	padding: 16px;
	background: var(--ua-paper);
	border: 1px solid var(--ua-line);
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
BUG FIX: [hidden] atribut ima istu CSS specifičnost (0,0,1,0) kao klasa
.ulapoint-aff-promo-form, a autorski CSS uvijek nadjačava UA (browser)
default [hidden]{display:none}. Rezultat je bio da je panel ostajao
vizualno otvoren unatoč hidden atributu u HTML-u. Eksplicitno, usko
scopirano pravilo ispod prisilno vraća display:none kad je hidden
prisutan — vezano isključivo uz ID promo panela, ne globalno na sve
[hidden] elemente na webu.
*/
#uafPromoChangeForm[hidden] {
	display: none !important;
}
.ulapoint-aff-promo-form label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ua-muted);
}
.ulapoint-aff-promo-form input {
	padding: 12px 14px;
	border: 1px solid var(--ua-line);
	border-radius: 3px;
	background: var(--ua-white);
	font-family: var(--ua-sans);
	font-size: 0.95rem;
	color: var(--ua-ink);
	text-transform: uppercase;
}
.ulapoint-aff-promo-form input:focus {
	outline: none;
	border-color: var(--ua-teal-deep);
	box-shadow: 0 0 0 3px rgba(15,94,98,0.1);
}
.ulapoint-aff-promo-hint {
	font-size: 0.74rem;
	color: var(--ua-muted);
	margin: 0;
}
.ulapoint-aff-promo-actions { display: flex; gap: 10px; margin-top: 4px; }

/* Cooldown panel: kompaktan, bez inputa, samo poruka + Zatvori */
.ulapoint-aff-promo-cooldown-text {
	font-size: 0.86rem;
	color: var(--ua-ink-soft, var(--ua-ink));
	line-height: 1.6;
	margin: 0 0 10px;
}
.ulapoint-aff-btn-small {
	padding: 10px 20px !important;
	font-size: 0.76rem !important;
}
.ulapoint-aff-btn-ghost {
	background: none;
	border: 1px solid var(--ua-line);
	border-radius: 100px;
	padding: 10px 20px;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ua-muted);
	cursor: pointer;
}
.ulapoint-aff-btn-ghost:hover { border-color: var(--ua-ink); color: var(--ua-ink); }

@media (max-width: 640px) {
	.ulapoint-aff-promo-actions { flex-direction: column; }
	.ulapoint-aff-promo-actions button { width: 100%; }
}

.ulapoint-aff-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	background: var(--ua-line);
	border: 1px solid var(--ua-line);
}
@media (max-width: 780px) { .ulapoint-aff-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.ulapoint-aff-stat {
	background: var(--ua-white);
	padding: 20px 16px;
	text-align: center;
}
.ulapoint-aff-stat-highlight { background: var(--ua-teal-wash); }
.ulapoint-aff-stat-value {
	display: block;
	font-family: var(--ua-serif);
	font-size: 1.5rem;
	color: var(--ua-ink);
	margin-bottom: 4px;
}
.ulapoint-aff-stat-label {
	font-size: 0.7rem;
	color: var(--ua-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ulapoint-aff-table-wrap { overflow-x: auto; }
.ulapoint-aff-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ulapoint-aff-table th, .ulapoint-aff-table td {
	padding: 12px 10px;
	text-align: left;
	border-bottom: 1px solid var(--ua-line);
	white-space: nowrap;
}
.ulapoint-aff-table th {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ua-muted);
}

.ulapoint-aff-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 100px;
	font-size: 0.7rem;
	font-weight: 600;
}
.ulapoint-aff-badge-pending { background: #FFF3CD; color: #8A6D00; }
.ulapoint-aff-badge-approved { background: var(--ua-teal-wash); color: var(--ua-teal-deep); }
.ulapoint-aff-badge-paid { background: #D4EDDA; color: #155724; }
.ulapoint-aff-badge-cancelled { background: #F8D7DA; color: #721C24; }
.ulapoint-aff-badge-refunded { background: #F3E2D3; color: #8A4B1E; }

.ulapoint-aff-logout {
	text-align: center;
	margin-top: 8px;
}
.ulapoint-aff-logout a {
	font-size: 0.82rem;
	color: var(--ua-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--ua-line);
	padding-bottom: 2px;
}
.ulapoint-aff-logout a:hover { color: var(--ua-teal-deep); border-color: var(--ua-teal-deep); }

.ulapoint-aff-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 18px;
}
.ulapoint-aff-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--ua-line);
	border-radius: 3px;
	font-size: 0.82rem;
	color: var(--ua-ink);
	text-decoration: none;
}
.ulapoint-aff-pagination a:hover { border-color: var(--ua-teal-deep); }
.ulapoint-aff-pagination a.is-current {
	background: var(--ua-teal-deep);
	border-color: var(--ua-teal-deep);
	color: var(--ua-white);
}