/* ======================================================================
   NAVBAR & FOOTER — Redesign Minimalis & Modern
   File ini dimuat di headv2.php sehingga berlaku di SELURUH halaman
   (navbar & footer sama di semua halaman toko).
   ====================================================================== */

/* ---------------------------------------------------------------------
   TYPOGRAFI GLOBAL — font modern & minimalis, berlaku di SEMUA halaman
   Pakai "Inter" (font yang dipakai kebanyakan web modern saat ini),
   fallback ke font sistem kalau Google Fonts gagal dimuat.
--------------------------------------------------------------------- */
html, body{
	font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.sec-title, .sec-title h2, .title, .foot-title,
.btn, .nav-link, .navbar-brand,
input, select, textarea{
	font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---------------------------------------------------------------------
   NAVBAR — Top Bar (logo, search, keranjang/wishlist)
--------------------------------------------------------------------- */
header.header1{ background:#fff; }

.top-menu{
	background:#fff !important;
	border-bottom:1px solid #ececec;
	box-shadow:none !important;
	padding-top:16px;
	padding-bottom:16px;
}
.top-menu .navbar-brand img{ height:32px !important; }

.top-menu .search-top .form-header{
	border:none;
	border-bottom:1px solid #ddd;
	border-radius:0;
	background:transparent;
	padding:0 0 6px 0;
}
.top-menu .search-top .form-header input{
	border:none;
	background:transparent;
	font-size:13px;
	letter-spacing:.3px;
	padding-left:2px;
}
.top-menu .search-top .form-header input:focus{ outline:none; }
.top-menu .search-top .form-header button{
	background:transparent !important;
	color:#111 !important;
	border:none;
}

.top-menu .top-link{ position:relative; margin-left:20px; display:inline-block; }
.top-menu .top-link i{
	background:none !important;
	-webkit-text-fill-color:#111 !important;
	color:#111 !important;
	font-size:20px !important;
	transition:opacity .15s ease;
}
.top-menu .top-link:hover i{ opacity:.6; }
.top-menu .top-link .badge{
	background:#111 !important;
	border-radius:50%;
	font-size:10px;
	font-weight:600;
	position:absolute;
	top:-6px;
	right:-10px;
	min-width:18px;
	padding:3px 5px;
}

/* ---------------------------------------------------------------------
   NAVBAR — Search overlay (mobile)
--------------------------------------------------------------------- */
#nav-search.bg-tipis{
	background:#fff !important;
	border-bottom:1px solid #ececec;
	box-shadow:0 2px 10px rgba(0,0,0,.05) !important;
}
#nav-search .form-header{
	border:none;
	border-bottom:1px solid #ddd;
	background:transparent;
}
#nav-search .form-header input{
	border:none;
	background:transparent;
}

/* ---------------------------------------------------------------------
   NAVBAR — Menu sticky (desktop) & menu mobile
--------------------------------------------------------------------- */
#navbar-sticky.bg-tipis,
.bg-tipis{
	background:#fff !important;
	box-shadow:none !important;
}
#navbar-sticky{ border-bottom:1px solid #ececec; }

#navbar-sticky .nav-link,
.navbar-nav .nav-link{
	font-size:12px;
	font-weight:600;
	letter-spacing:1.2px;
	text-transform:uppercase;
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
	padding:12px 16px !important;
	position:relative;
	display:inline-block;
}
#navbar-sticky .nav-link i,
.navbar-nav .nav-link i{
	background:none !important;
	-webkit-text-fill-color:#111 !important;
	color:#111 !important;
}
#navbar-sticky .nav-link::after{
	content:"";
	position:absolute;
	left:16px;
	right:16px;
	bottom:6px;
	height:2px;
	background:#111;
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .2s ease;
}
#navbar-sticky .nav-item.active .nav-link::after,
#navbar-sticky .nav-link:hover::after{
	transform:scaleX(1);
}

/* ---------------------------------------------------------------------
   NAVBAR — Bottom bar (mobile)
--------------------------------------------------------------------- */
.bottom-bar{
	background:#fff !important;
	color:#111 !important;
	box-shadow:0 -1px 0 #ececec, 0 -4px 14px rgba(0,0,0,.05) !important;
	border-top:1px solid #ececec;
}
.bottom-bar .col{
	color:#111 !important;
	font-size:11px;
	padding-top:8px;
	padding-bottom:8px;
}
.bottom-bar .col i{
	font-size:19px;
	display:block;
	margin-bottom:3px;
}
.bottom-bar .col small{
	text-transform:uppercase;
	letter-spacing:.4px;
	font-size:9px;
	color:#555;
}
.bottom-bar .badge,
.bottom-bar .badge-danger{
	background:#ff0000 !important;
	border-radius:50%;
}

/* ---------------------------------------------------------------------
   FOOTER
--------------------------------------------------------------------- */
.bg-foot-gradient{ display:none !important; }

footer.bg-foot{
	background:#f7f7f7 !important;
	color:#333 !important;
	border-top:1px solid #ececec;
	margin-top:60px !important;
}
footer .foot-title{
	font-size:12px;
	font-weight:700;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
	display:inline-block;
	padding-bottom:14px !important;
	margin-bottom:20px !important;
	border-bottom:2px solid #111;
}
footer p, footer table td{
	font-size:13px;
	color:#555;
}
footer table td{ padding-bottom:6px; }
footer .foot-menu{ list-style:none; padding-left:0; }
footer .foot-menu li a{
	color:#555;
	font-size:13px;
	transition:color .15s ease, padding-left .15s ease;
	display:inline-block;
}
footer .foot-menu li a:hover{
	color:#111;
	padding-left:3px;
}
footer .btn-success{
	background:#111 !important;
	border-color:#111 !important;
	border-radius:0 !important;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:12px;
	font-weight:600;
}
footer .fab, footer .fas{
	color:#777 !important;
	transition:color .15s ease, transform .15s ease;
}
footer a:hover .fab, footer a:hover .fas,
footer .fab:hover, footer .fas:hover{
	color:#111 !important;
	transform:translateY(-2px);
}
footer .t-center{
	border-top:1px solid #e2e2e2;
	font-size:12px;
	color:#777;
	letter-spacing:.3px;
	padding-top:18px !important;
}

/* ---------------------------------------------------------------------
   MOBILE — Navbar atas (logo + heart + basket + hamburger) lebih ramping
--------------------------------------------------------------------- */
@media (max-width:767px){
	.navbar.showsmall{
		background:#fff !important;
		border-bottom:1px solid #ececec;
		box-shadow:none !important;
		padding:10px 6px !important;
	}
	.navbar.showsmall .navbar-brand{
		margin-right:0;
	}
	.navbar.showsmall .navbar-brand img{
		height:20px !important;
	}
	.navbar.showsmall .navbar-toggler{
		border:none;
		padding:4px 8px;
		font-size:16px;
		line-height:1;
	}
	.navbar.showsmall .navbar-toggler i{
		color:#111 !important;
	}
	.navbar.showsmall .navbar-toggler.text-danger i{
		color:#111 !important;
	}

	/* Bottom bar lebih ramping & rapat */
	.bottom-bar{
		padding:0;
	}
	.bottom-bar .col{
		padding-top:7px;
		padding-bottom:7px;
	}
	.bottom-bar .col i{
		font-size:16px;
		margin-bottom:2px;
	}
	.bottom-bar .col small{
		font-size:8px;
		letter-spacing:.3px;
	}
	.bottom-bar .badge,
	.bottom-bar .badge-danger{
		font-size:8px;
		padding:2px 4px;
		top:-3px;
		min-width:14px;
	}
}