/* BASE & STREET THEME */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Helvetica Neue', Arial, sans-serif; }
body { background-color: #000; color: #fff; overflow: hidden; }

/* VIEWS */
#app-content { height: calc(100vh - 65px); width: 100vw; position: relative; }
.view-section { display: none; height: 100%; width: 100%; overflow-y: auto; background: #000; }
#map-view { display: block; }
#map { height: 100%; width: 100%; background: #111; }

/* BOTTOM NAVIGATION */
#bottom-nav {
    position: fixed; bottom: 0; width: 100%; height: 65px;
    background-color: #121212; display: flex; justify-content: space-between;
    align-items: center; border-top: 1px solid #222; z-index: 2000; padding: 0 5px;
}
.nav-item { 
    color: #555; text-align: center; font-size: 9px; font-weight: bold; 
    text-transform: uppercase; cursor: pointer; flex: 1; 
    display: flex; flex-direction: column; align-items: center; transition: color 0.3s; 
}
.nav-item.active { color: #fff; }
.nav-icon { font-size: 20px; margin-bottom: 3px; }

.nav-create-wrapper { flex: 1.2; display: flex; justify-content: center; align-items: center; }
.nav-create {
    background-color: #ff3b30; color: #fff; width: 52px; height: 52px;
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    font-size: 30px; transform: translateY(-15px); box-shadow: 0 5px 15px rgba(255, 59, 48, 0.4);
    border: 4px solid #000; cursor: pointer;
}

.custom-map-marker { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); object-fit: cover; }

/* MODALS */
.fullscreen-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 3000; flex-direction: column; align-items: center; justify-content: center;
}

#media-preview { width: 100%; height: 60vh; background: #111; object-fit: cover; }
.create-controls { padding: 15px; width: 100%; display: flex; flex-direction: column; gap: 10px; }

.btn { padding: 12px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; text-align: center; width: 100%; margin-bottom: 10px; }
.btn-primary { background: #ff3b30; color: #fff; }
.btn-secondary { background: #333; color: #fff; }

.auth-container { background: #111; padding: 30px; border-radius: 10px; width: 90%; max-width: 350px; text-align: center; border: 1px solid #333; }
.auth-container input { width: 100%; padding: 12px; margin-bottom: 15px; background: #222; color: #fff; border: 1px solid #444; border-radius: 5px; }

#loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1000; }
.content-padding { padding: 20px; }
.create-options { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.create-options select, .create-options input { padding: 10px; background: #222; color: #fff; border: 1px solid #444; border-radius: 5px; flex: 1; font-size: 14px; }