/* ======================================================================
   Autostakla Laus – Webshop tema
   Smjer: svijetao, prozračan, zaobljen. Crvena (#e01f28) ostaje
   glavna brand/CTA boja, uz prigušeni tirkiz kao svježa druga boja
   za filtere i strukturne elemente (asocijacija na staklo).

   --brand-red    #e01f28  CTA, cijena, aktivna stanja
   --brand-red-dk #b81620
   --teal         #2f8fa3  sekundarna boja - filteri, ikone, naglasci
   --teal-light   #eaf6f8  prozračna podloga (filter panel, sekcije)
   --ink          #2b2f34  tekst
   --grey         #7c8288  sekundarni tekst
   --border       #e7ebeb  meke linije
   --bg           #fbfcfc  pozadina stranice
   ====================================================================== */

:root {
	--brand-red: #e01f28;
	--brand-red-dk: #b81620;
	--brand-red-soft: rgba(224, 31, 40, 0.08);
	--white: #ffffff;
	--teal: #2f8fa3;
	--teal-dk: #226a79;
	--teal-light: #eaf6f8;
	--ink: #2b2f34;
	--grey: #7c8288;
	--border: #8f8d8e;
	--bg: #fbfcfc;
	--font-display: 'Poppins', sans-serif;
	--font-body: 'Inter', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
}

a {
	color: var(--brand-red);
}
a:hover,
a:focus {
	color: var(--brand-red-dk);
}

/* ---------- Navbar ---------- */
.navbar {
	background: #fff !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
}

.navbar .nav-link {
	color: var(--ink);
	font-weight: 500;
	padding: 0.5rem 1rem;
}

.navbar .nav-link:hover,
.navbar .nav-item.active .nav-link {
	color: var(--brand-red);
}

.navbar .dropdown-menu {
	border: none;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.navbar .dropdown-item:hover {
	background: var(--brand-red-soft);
	color: var(--brand-red-dk);
}

.navbar-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--brand-red);
	color: #fff !important;
	border-radius: 20px;
	padding: 0.4rem 1rem;
	font-weight: 600;
	font-size: 0.9rem;
	transition: background 0.2s ease;
}
.navbar-phone:hover {
	background: var(--brand-red-dk);
	color: #fff !important;
}
.navbar-phone img {
	width: 16px;
	height: 16px;
	filter: brightness(0) invert(1);
}

.navbar-cart {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 1.5px solid var(--teal);
	color: var(--teal-dk) !important;
	border-radius: 20px;
	padding: 0.35rem 0.9rem;
	font-weight: 600;
	font-size: 0.9rem;
}
.navbar-cart:hover {
	background: var(--teal);
	color: #fff !important;
}
.navbar-cart img {
	width: 16px;
	height: 16px;
}

/* ---------- Naslov stranice ---------- */
.page-header-block {
	padding: 1.6rem 0 1.2rem;
	margin-bottom: 1.4rem;
}
.page-eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--teal-dk);
	margin-bottom: 0.4rem;
}
.page-header-block h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.7rem;
	color: var(--ink);
	margin: 0;
}

/* ---------- Filter panel (lijevi stupac) – prozračan ---------- */
.furniture-left {
	background: var(--white);
	border-radius: 14px;
	padding: 1.6rem 1.5rem 1.8rem;
		border: 1px solid var(--border);
}
.furniture-left h3 {
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--white);
	margin-top: 1.3rem;
	margin-bottom: 0.6rem;
}
.furniture-left h3:first-of-type {
	margin-top: 0;
}
.furniture-left .form-control {
	background: #fff;
	border: 1px solid rgba(47, 143, 163, 0.25);
	border-radius: 8px;
	color: var(--ink);
	font-size: 0.9rem;
	padding: 0.55rem 0.75rem;
	height: auto;
}
.furniture-left .form-control:focus {
	border-color: var(--brand-red);
	box-shadow: 0 0 0 0.15rem var(--brand-red-soft);
}

/* ---------- Slobodna pretraga ---------- */
.search-box {
	margin-bottom: 1.6rem;
}
.search-box h2 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--white);
	margin-bottom: 0.7rem;
}
.search-box .form-control.live-search {
	border: 1px solid var(--border);
	border-radius: 24px;
	background: #fff;
	font-size: 0.95rem;
	padding: 0.75rem 1.3rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-box .form-control.live-search:focus {
	border-color: var(--brand-red);
	box-shadow: 0 0 0 0.15rem var(--brand-red-soft);
}
.search-box .result,
.furniture-right .result_kb {
	position: relative;
	z-index: 20;
}

/* ---------- Desni panel: kataloški broj ---------- */
.furniture-right {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 1.5rem;
}
.furniture-right h3 {
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--white);
	margin-bottom: 0.7rem;
}
.furniture-right .form-control {
	border: 1px solid var(--border);
	border-radius: 24px;
	padding: 0.65rem 1.1rem;
}
.furniture-right .form-control:focus {
	border-color: var(--brand-red);
	box-shadow: 0 0 0 0.15rem var(--brand-red-soft);
}

/* ---------- Kartica proizvoda ---------- */
a.view-btn {
	display: block;
	text-decoration: none;
	color: inherit;
}
.big-box {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 1.3rem 1.5rem;
	margin-bottom: 1.1rem;
	transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
a.view-btn:hover .big-box {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
	border-color: rgba(47, 143, 163, 0.3);
}
.big-box h3 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 0.7rem;
}
.big-box .left-big p {
	margin-bottom: 0.35rem;
	color: var(--grey);
	font-size: 0.9rem;
}
.big-box .left-big p span {
	color: var(--ink);
	font-weight: 600;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	padding: 0.1rem 0.5rem;
	border-radius: 5px;
}

.square {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 0.35rem 0.7rem;
	font-size: 0.83rem;
}

/* ---------- Zaliha – prozračna pilula ---------- */
.stock-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border-radius: 20px;
	padding: 0.15rem 0.6rem;
	font-size: 0.78rem;
	font-weight: 600;
	margin-left: 0.3rem;
}
.stock-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
}
.stock-pill.instock {
	background: rgba(46, 204, 113, 0.12);
	color: #1e9c58;
}
.stock-pill.instock::before {
	background: #2ecc71;
}
.stock-pill.less3 {
	background: rgba(243, 156, 18, 0.12);
	color: #c47f0e;
}
.stock-pill.less3::before {
	background: #f39c12;
}
.stock-pill.outstock {
	background: var(--brand-red-soft);
	color: var(--brand-red-dk);
}
.stock-pill.outstock::before {
	background: var(--brand-red);
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--ink);
	color: #c4c9cc;
	margin-top: 2rem;
}
.site-footer h5 {
	color: #fff;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 1rem;
}
.site-footer a {
	color: #c4c9cc;
}
.site-footer a:hover {
	color: var(--brand-red);
}
.site-footer .footer-cta {
	background: var(--brand-red);
}
.site-footer .footer-cta .cta-box {
	color: #fff;
	padding: 1.4rem 0.5rem;
	text-align: center;
}
.site-footer .footer-cta .cta-box i {
	font-size: 1.7rem;
	margin-bottom: 0.5rem;
	display: inline-block;
}
.site-footer .footer-cta .cta-box a {
	color: #fff;
}
.site-footer .footer-cta .cta-box small {
	display: block;
	opacity: 0.85;
	text-transform: uppercase;
	font-size: 0.74rem;
	letter-spacing: 0.05em;
}
.site-footer .footer-cta .cta-box strong {
	display: block;
	font-family: var(--font-display);
	font-size: 1.2rem;
}
.site-footer .social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	margin-left: 6px;
}
.site-footer .social-icons a:hover {
	background: var(--teal);
	color: #fff;
}
.site-footer .copyright-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 1rem 0;
	font-size: 0.85rem;
	color: #9aa0a4;
}

/* ---------- Pristupačnost ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--brand-red);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.big-box,
	.search-box .form-control.live-search {
		transition: none !important;
	}
}