/*
SimSim Trip — Without-Login Desktop Nav (without-login-desktop-nav.css)
══════════════════════════════════════════════════════════════════════════
HOW TO USE ON ANY PAGE (login, otp, signup, popular-escapes etc.):
1. In :
2. At the very top of :
3. Before :
NOTE: Requires a local server (VS Code Live Server etc.) for fetch() to work.
*/
/* ── Reset helpers ── */
*, *::before, *::after { box-sizing: border-box; }
/* ── Nav shell ── */
.wl-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
height: 64px;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
font-family: 'Satoshi', sans-serif;
position: sticky;
top: 0;
z-index: 200;
}
/* ── Logo ── */
.wl-nav-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-weight: 800;
font-size: 1.05rem;
color: #6B48E8;
white-space: nowrap;
}
.wl-logo-icon {
width: 75px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Nav pills ── */
.wl-nav-pills {
display: flex;
align-items: center;
gap: 8px;
}
.wl-nav-pill {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 18px;
border-radius: 22px;
background: #f3f4f6;
border: 1.5px solid #e5e7eb;
color: #4b5563;
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
font-family: 'Satoshi', sans-serif;
transition: background 0.2s, color 0.2s, border-color 0.2s;
white-space: nowrap;
}
.wl-nav-pill:hover {
background: #ede9f8;
color: #6B48E8;
border-color: #c4b5fd;
}
.wl-nav-pill svg {
flex-shrink: 0;
color: inherit;
}
/* ── Hide on mobile ── */
@media (max-width: 768px) {
.wl-nav {
display: none;
}
}