.sgnp-wrapper {
background-color: var(--sgnp-bg, #0d2c3e);
height: var(--sgnp-height, 50px);
z-index: var(--sgnp-z, 999999);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
font-family: -apple-system, sans-serif;
margin: 0; padding: 0;
}
.sgnp-container {
max-width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: var(--sgnp-justify, center);
align-items: center;
}
.sgnp-nav {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
height: 100%;
align-items: center;
}
.sgnp-item {
margin: 0 !important;
padding: 0 !important;
height: 100%;
display: flex;
align-items: center;
}
.sgnp-link {
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--sgnp-padding, 25px);
text-decoration: none !important;
color: var(--sgnp-text, #ffffff) !important;
height: 100%;
transition: all 0.2s ease;
border-right: 1px solid var(--sgnp-border, rgba(255,255,255,0.1));
font-size: var(--sgnp-font-size, 14px);
}
.sgnp-link:first-child {
border-left: 1px solid var(--sgnp-border, rgba(255,255,255,0.1));
}
.sgnp-link:hover {
background-color: var(--sgnp-hover-bg, rgba(255, 255, 255, 0.05));
color: var(--sgnp-hover-text, #ffffff) !important;
}
.sgnp-link.active {
background-color: var(--sgnp-active-bg, #ffffff) !important;
color: var(--sgnp-active-text, #0d2c3e) !important;
}
.sgnp-logo {
max-height: calc(var(--sgnp-height, 50px) * 0.5);
width: auto;
display: block;
margin-right: 8px;
transition: filter 0.2s;
}
.sgnp-link.active .sgnp-logo {
filter: none;
}
.sgnp-label {
font-weight: 600;
font-size: inherit;
}
@media (max-width: 768px) {
.sgnp-wrapper { height: auto; min-height: var(--sgnp-height, 50px); }
.sgnp-nav { flex-wrap: wrap; justify-content: center; width: 100%; }
.sgnp-link { padding: 10px 15px; width: 100%; border: none; border-bottom: 1px solid var(--sgnp-border, rgba(255,255,255,0.1)); } .sgnp-hide-mobile { display: none !important; }
}