:root {
    /* Pagrindinė paletė */
    --primary-color: #6366f1;
    --primary-gradient: linear-gradient(135deg, #6366f1, #818cf8);
    --danger-color: #ef4444;
    --success-color: #10b981;
    --text-dark: #111827;
    --text-muted: #6b7280;

    /* UI Elementai */
    --border-radius: 20px;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: 1px solid rgba(255, 255, 255, 0.5);

    /* Animacijos kintamieji */
    --translate-main-slider: 100%;
    --main-slider-color: #e3f2fd;
    --translate-filters-slider: 0;
    --filters-container-height: 3.5rem;
    --filters-wrapper-opacity: 1;

    /* Saugios zonos (iPhone) */
    --safe-bottom: env(safe-area-inset-bottom, 20px);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-dark);
    background: #f3f4f6;
    overflow: hidden;
    margin: 0;
}

/* --- ŽEMĖLAPIS --- */
#map { position: absolute; top: 0; bottom: 0; width: 100%; z-index: 0; }
.mapboxgl-ctrl-top-right { top: 60px; }
.mapboxgl-ctrl-group { border-radius: 12px !important; border: none !important; box-shadow: var(--shadow-sm) !important; }

/* --- VARTOTOJO KONTROLĖS --- */
#user-controls { z-index: 10; transition: all 0.3s ease; }
#userInfo, #btnLogin {
    background: var(--glass-bg);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border); border-radius: 50rem; box-shadow: var(--shadow-sm);
}

/* --- MARKERS (Žymekliai) --- */
.custom-marker {
    width: 32px; height: 32px;
    border-radius: 50% 50% 50% 0;
    background: var(--primary-color);
    transform: rotate(-45deg);
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; transition: transform 0.2s;
}
.custom-marker:active { transform: rotate(-45deg) scale(0.9); }
.custom-marker::after { content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; transform: rotate(45deg); }
.marker-food { background: #ef4444; }
.marker-place { background: #10b981; }
.marker-other { background: #3b82f6; }
.marker-comment-count {
    position: absolute; top: -8px; right: -8px; width: 18px; height: 18px;
    background: #fff; color: var(--text-dark); border-radius: 50%;
    font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    transform: rotate(45deg); box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* --- APATINIS MENIU (Amazing Tabs) --- */
nav.amazing-tabs {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: var(--glass-border); border-radius: 24px 24px 0 0;
    padding-bottom: var(--safe-bottom); padding-top: 10px;
    z-index: 1030; box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
}

.filters-container { overflow: hidden; max-height: var(--filters-container-height); transition: max-height 0.4s; margin-bottom: 5px; }
.filters-wrapper { width: 90%; max-width: 400px; margin: 0 auto; background: rgba(0,0,0,0.03); border-radius: 14px; padding: 4px; position: relative; opacity: var(--filters-wrapper-opacity); transition: opacity 0.3s; }
ul.filter-tabs { list-style: none; padding: 0; margin: 0; display: flex; position: relative; z-index: 2; }
ul.filter-tabs li { flex: 1; text-align: center; }
.filter-button { width: 100%; padding: 6px 0; border: none; background: transparent; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); transition: color 0.3s; }
.filter-button.filter-active { color: var(--text-dark); }
.filter-slider-rect { position: absolute; top: 4px; left: 4px; bottom: 4px; width: calc(25% - 2px); background: #fff; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transform: translateX(var(--translate-filters-slider)); transition: transform 0.3s; z-index: 1; }

.main-tabs-container { padding: 0 10px; position: relative; }
.main-tabs-wrapper { max-width: 500px; margin: 0 auto; position: relative; }
ul.main-tabs { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; position: relative; z-index: 2; }
.round-button { width: 50px; height: 50px; border: none; background: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.4rem; transition: all 0.3s ease; }
.round-button.active { color: var(--text-dark); transform: translateY(-5px); }
.main-slider { position: absolute; top: 0; left: 0; width: 20%; display: flex; justify-content: center; transform: translateX(var(--translate-main-slider)); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 1; pointer-events: none; }
.main-slider-circle { width: 50px; height: 50px; background: var(--main-slider-color); border-radius: 50%; opacity: 0.5; filter: blur(10px); }
.animate-jello { animation: jello 0.8s both; }
@keyframes jello { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } }

/* --- OFFCANVAS & MODALS (SVARBU: Fix pointer-events) --- */

.modal-backdrop.show { opacity: 0.3; backdrop-filter: blur(4px); }

/* Būtinas pointer-events: auto, kitaip mygtukai neveiks */
.modal-content {
    border: none;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    pointer-events: auto !important;
    background-clip: padding-box;
}

.offcanvas-bottom { border-top-left-radius: 24px; border-top-right-radius: 24px; border: none; box-shadow: 0 -10px 40px rgba(0,0,0,0.1); max-height: 85vh; }
.offcanvas-header { position: relative; padding-top: 25px; }
.offcanvas-header::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; background: #e5e7eb; border-radius: 10px; }
.offcanvas-end { border-top-left-radius: 24px; border-bottom-left-radius: 24px; border: none; }

/* --- CHAT STILIUS --- */
#chat-messages-area { background: #f9fafb; }
.chat-bubble { padding: 10px 16px; border-radius: 18px; font-size: 0.95rem; max-width: 80%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.05); margin-bottom: 4px; }
.align-items-start .chat-bubble { background: #fff; color: var(--text-dark); border-bottom-left-radius: 4px; }
.align-items-end .chat-bubble { background: var(--primary-gradient); color: #fff; border-bottom-right-radius: 4px; }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; margin-right: 8px; border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.notification-badge { position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: var(--danger-color); border: 2px solid #fff; border-radius: 50%; }

/* --- MEDIA --- */
.media-gallery-item, .media-gallery-video { height: 140px; width: auto; border-radius: 12px; margin-right: 10px; object-fit: cover; box-shadow: var(--shadow-sm); }