/* =============================================
StayHack – Bottom Navigation Bar
Πρόσθεσε στο κάθε σελίδας:
Και πριν το :
============================================= */
.sh-bottom-nav {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 999;
background: #ffffff;
border-top: 1px solid rgba(0,0,0,.08);
box-shadow: 0 -4px 20px rgba(0,0,0,.08);
display: flex;
justify-content: space-around;
align-items: center;
padding: 8px 0 max(8px, env(safe-area-inset-bottom));
height: calc(62px + max(0px, env(safe-area-inset-bottom)));
}
.sh-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
flex: 1;
text-decoration: none;
padding: 4px 8px;
border-radius: 12px;
transition: all .2s ease;
cursor: pointer;
border: none;
background: none;
-webkit-tap-highlight-color: transparent;
}
.sh-nav-item:active {
transform: scale(0.92);
}
.sh-nav-icon {
font-size: 22px;
line-height: 1;
transition: transform .2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.sh-nav-icon svg {
width: 22px;
height: 22px;
color: #9ca3af;
transition: color .2s ease;
}
.sh-nav-item.active .sh-nav-icon svg {
color: #BF092F;
}
.sh-nav-label {
font-size: 10px;
font-weight: 600;
color: #9ca3af;
font-family: system-ui, -apple-system, sans-serif;
white-space: nowrap;
transition: color .2s ease;
}
/* Active state */
.sh-nav-item.active .sh-nav-label {
color: #BF092F;
font-weight: 800;
}
.sh-nav-item.active .sh-nav-icon {
transform: translateY(-2px) scale(1.15);
filter: drop-shadow(0 2px 4px rgba(191,9,47,.3));
}
/* Active indicator dot */
.sh-nav-item.active::before {
content: '';
position: absolute;
bottom: 6px;
width: 4px; height: 4px;
background: #BF092F;
border-radius: 50%;
}
/* Ripple effect on tap */
.sh-nav-item::after {
content: '';
position: absolute;
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(191,9,47,.1);
transform: scale(0);
transition: transform .3s ease, opacity .3s ease;
opacity: 0;
}
.sh-nav-item:active::after {
transform: scale(1);
opacity: 1;
}
/* Κάνε χώρο κάτω για το nav σε όλες τις σελίδες */
body {
padding-bottom: calc(70px + max(0px, env(safe-area-inset-bottom)));
}