/*
 * Redizajn "21" - nalog sekcija (docs/37). Ucitava se POSLE redesign-2a...20 i
 * deli tokene (:root), resete (.vh-home), dugmad (.vh-btn*), breadcrumb
 * (.vh-adr__crumbs) i srce (.vh-adr__promo-heart).
 *
 * Legacy markup (account-nav-shell iz admin/include/menu.php, .reg_menu_bgd /
 * .reg_form_bgd omotaci, bootstrap .form-control forme) se NE menja - samo se
 * restilizuje, scope-ovano na redizajn omotace da legacy grana (prekidac
 * iskljucen) ostane netaknuta.
 *
 * PAZNJA na scope: telo naloga je .vh-acc__body, ALI nalog-navigacija se
 * pojavljuje i van njega - shop sekcija (/moji-proizvodi, /moja-kupovina kroz
 * shop tok) ide kroz vh-shop omotac (docs/38). Zato je nav blok scope-ovan na
 * .vh-home (svaka redizajn strana), inace dugmici tamo ostaju cetvrtasti -
 * Trello #61 "Mix dva stila dizajna".
 */

/* SCOPE: .vh-home.vh-acc, ne golo .vh-acc (2026-08-28).
   Klasu `vh-acc` koristi i footer akordeon - js/redesign-2a.js je dodaje na
   <h4> naslove kolona u footeru (linija ~104). Dok je ovo pravilo bilo golo,
   bojilo je te naslove u BELO preko roze pozadine footera (#FBF1F4), pa su na
   mobilnom izgledali kao cetiri bele trake. Omotac strane naloga uvek nosi i
   `vh-home` (nalog-21.php:49), a footer h4 ne - zato je lanac klasa dovoljan.
   Isti obrazac kao sudar .vh-offer (karusel vs strana ponude). */
.vh-home.vh-acc { background: #fff; }
.vh-home.vh-acc .vh-container { padding-top: 18px; padding-bottom: 48px; }

/* ---------- Gost / greska ---------- */
.vh-acc__guest {
	max-width: 520px;
	margin: 40px auto;
	background: var(--vh-tint);
	border: 1px solid var(--vh-border);
	border-radius: 14px;
	padding: 34px 30px;
	text-align: center;
}
#vh-acc .vh-acc__guest-title {
	font: 600 28px/1.2 var(--vh-serif);
	font-style: normal; letter-spacing: 0;
	color: var(--vh-text);
	padding: 0; margin: 10px 0 0; text-align: center;
}
.vh-acc__guest-text { font: 400 14px/1.7 var(--vh-sans); color: var(--vh-text-2); margin-top: 10px; }
.vh-acc__guest-text strong { color: var(--vh-text); font-weight: 600; }
.vh-acc__guest-text a { color: var(--vh-pink-dark) !important; }
.vh-acc__guest-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* ---------- Legacy omotaci u redizajn ljusci ---------- */
.vh-acc__body { margin-top: 16px; }
.vh-acc__body .container { max-width: none; padding: 0; }
.vh-acc__body .row { margin: 0; }
.vh-acc__body .reg_menu_bgd,
.vh-acc__body .reg_form_bgd {
	background: none;
	padding: 0;
}
.vh-acc__body .reg_form_bgd,
.vh-acc__body #category-news {
	display: block;
	background: #fff;
	border: 1px solid var(--vh-border);
	border-radius: 14px;
	padding: 24px 26px;
	margin-top: 18px;
}
.vh-acc__body #category-news { overflow-x: auto; }
/* dupli okvir kad #category-news stoji unutar reg_form_bgd */
.vh-acc__body .reg_form_bgd #category-news { border: 0; padding: 0; margin-top: 0; }

/* ---------- Nalog navigacija (account-nav-shell iz menu.php) ---------- */
/* Nalog-navigacija: scope .vh-home (ne .vh-acc) jer se ista nav pojavljuje i
   u shop sekciji (/moji-proizvodi -> vh-shop omotac) - Trello #61 "Mix dva
   stila dizajna": tamo su dugmici ostajali cetvrtasti. */
.vh-home .account-nav-shell {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: flex-start;
	background: var(--vh-tint);
	border: 1px solid var(--vh-border);
	border-radius: 14px;
	padding: 14px 16px;
}
.vh-home .account-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.vh-home .account-nav-context { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vh-home .account-nav-heading {
	font: 600 10px/1 var(--vh-sans);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--vh-muted);
}
.vh-home .account-nav-items { display: flex; flex-wrap: wrap; gap: 8px; }
.vh-home .korsinik_linija { display: inline-block; margin: 0; padding: 0; }
.vh-home a.account-nav-link,
.vh-home .korsinik_linija a.btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 600 12px/1 var(--vh-sans);
	color: #8A6E7B !important;
	background: #fff;
	border: 1px solid var(--vh-border-2);
	border-radius: 100px;
	padding: 9px 15px;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	text-shadow: none;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.vh-home a.account-nav-link:hover,
.vh-home .korsinik_linija a.btn:hover { border-color: var(--vh-pink); color: var(--vh-pink-dark) !important; background: #fff; }
.vh-home a.account-nav-link.btn-pink-small-current,
.vh-home .korsinik_linija a.btn.btn-pink-small-current {
	background: var(--vh-pink);
	border-color: var(--vh-pink);
	color: #fff !important;
}
.vh-home .account-nav-link .fa { font-size: 12px; }

/* ---------- Generalno: legacy forme unutar kartice ---------- */
#vh-acc .vh-acc__body h2, #vh-acc .vh-acc__body h3, #vh-acc .vh-acc__body h4 {
	font: 600 20px/1.3 var(--vh-serif);
	font-style: normal; letter-spacing: 0;
	color: var(--vh-text);
	padding: 0; margin: 0 0 12px; text-align: left;
}
.vh-acc__body { font: 400 14px/1.65 var(--vh-sans); color: var(--vh-text-2); }
.vh-acc__body label, .vh-acc__body .form-label { font: 600 12px/1.4 var(--vh-sans); color: var(--vh-muted); }
.vh-acc__body .form-control,
.vh-acc__body input[type="text"], .vh-acc__body input[type="email"],
.vh-acc__body input[type="password"], .vh-acc__body input[type="tel"],
.vh-acc__body select, .vh-acc__body textarea {
	font: 400 14px/1.4 var(--vh-sans);
	color: var(--vh-text);
	background: #fff;
	border: 1px solid var(--vh-border-2);
	border-radius: 8px;
	padding: 10px 13px;
	height: auto;
	box-shadow: none;
}
.vh-acc__body .form-control:focus,
.vh-acc__body input:focus, .vh-acc__body select:focus, .vh-acc__body textarea:focus {
	outline: none;
	border-color: var(--vh-pink);
	box-shadow: 0 0 0 3px rgba(244, 154, 193, .18);
}
.vh-acc__body .btn-pink, .vh-acc__body .btn-pink-blue, .vh-acc__body input[type="submit"] {
	background: var(--vh-pink);
	border: 0;
	border-radius: 8px;
	color: #fff;
	font: 600 12px/1 var(--vh-sans);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 13px 24px;
	text-shadow: none;
	box-shadow: none;
	transition: background .18s ease;
}
.vh-acc__body .btn-pink:hover, .vh-acc__body .btn-pink-blue:hover, .vh-acc__body input[type="submit"]:hover { background: var(--vh-pink-dark); color: #fff; }
.vh-acc__body table { border-collapse: collapse; width: 100%; }
.vh-acc__body td, .vh-acc__body th { border: 1px solid var(--vh-border); padding: 9px 12px; font-size: 13px; }
/* Legacy obavestenja se pojavljuju u SVIM omotacima (nalog, shop, korpa,
   vencanja) - scope .vh-home, isti razlog kao nav blok (Trello #61). */
.vh-home .error_notice, .vh-home .greska_obavestenje {
	background: var(--vh-pill);
	border: 1px solid var(--vh-border-2);
	border-radius: 10px;
	color: #C75C86;
	padding: 14px 16px;
	font: 400 14px/1.6 var(--vh-sans);
}
.vh-home .ok_notice {
	background: var(--vh-tint);
	border: 1px solid var(--vh-border);
	border-radius: 10px;
	padding: 14px 16px;
	font: 400 14px/1.6 var(--vh-sans);
	color: var(--vh-text-2);
}
.vh-acc__body a { color: var(--vh-pink-dark); }

/* Legacy kartice oglasa/vesti u listi (moje kompanije, lista zelja) */
.vh-acc__body .box-category-news, .vh-acc__body .box-company {
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 14px;
	background: #fff;
}

/* vco-manage traka (status + Pregled/Izmeni) na dnu kartice "Moj oglas".
   Bazna pravila su u css/d.css (`margin: 14px -15px -15px`), ali ih gasi
   globalni reset `.vh-home * { margin: 0 }` iz redesign-2a.css, koji se ucitava
   posle d.css - posledica je da se dugme "Saznaj vise" slepi sa gornjom ivicom
   trake. Ovde se razmak vraca, a negativna margina je -14px (koliko iznosi
   padding kartice u redizajnu, ne legacy 15px) da traka legne tacno na okvir;
   donji radijus prati kartu (12px okvir - 1px border). */
.vh-home .vco-manage {
	margin: 16px -14px -14px;
	border-radius: 0 0 11px 11px;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	.vh-acc .vh-container { padding-top: 12px; padding-bottom: 32px; }
	.vh-acc__guest { margin: 22px auto; padding: 26px 20px; }
	.vh-acc__body .reg_form_bgd, .vh-acc__body #category-news { padding: 18px 16px; }
	.vh-home .account-nav-shell { padding: 12px; }
}

@media (max-width: 560px) {
	.vh-home .vco-manage { margin: 14px -14px -14px; }
}