/**
 * Pramukh 360° - Premium Brand Menus & Glassmorphic UI Suite
 * Designed around Pramukh ABC branding: Deep Midnight Navy, Electric Cyan Glow, Frosted Glass & Luxury Typography
 */

/* ==========================================================================
   GLOBAL DESIGN TOKENS
   ========================================================================== */
:root {
    --p360-navy-deep: #060b18;
    --p360-navy-surface: rgba(11, 20, 38, 0.90);
    --p360-navy-card: rgba(8, 15, 30, 0.92);
    --p360-cyan-glow: #00b4d8;
    --p360-cyan-bright: #38bdf8;
    --p360-cyan-accent: #0ea5e9;
    --p360-cyan-border: rgba(0, 180, 216, 0.38);
    --p360-border-specular: rgba(255, 255, 255, 0.22);
    --p360-glass-blur: blur(22px) saturate(200%);
    --p360-text-primary: #ffffff;
    --p360-text-muted: #cbd5e1;
    --p360-shadow-luxury: 0 18px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(0, 180, 216, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   1. TOP-RIGHT BRANDING & ABOUT US BOX (.view-switcher2)
   ========================================================================== */
.view-switcher2,
.view-switcher.view-switcher2 {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 14px !important;
    background: linear-gradient(135deg, rgba(11, 20, 38, 0.90) 0%, rgba(6, 12, 26, 0.96) 100%) !important;
    backdrop-filter: var(--p360-glass-blur) !important;
    -webkit-backdrop-filter: var(--p360-glass-blur) !important;
    border: 1px solid var(--p360-cyan-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--p360-shadow-luxury) !important;
    z-index: 99999 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.view-switcher2:hover {
    border-color: rgba(56, 189, 248, 0.65) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 180, 216, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* Crisp Clean Logo Badge */
.view-switcher2 img,
.view-switcher.view-switcher2 img {
    height: 38px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
    padding: 4px 10px !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
    filter: none !important;
    -webkit-filter: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.view-switcher2:hover img {
    transform: scale(1.02) !important;
    box-shadow: 0 4px 14px rgba(0, 180, 216, 0.4), 0 0 0 1px #ffffff !important;
}

/* About Us Button */
.view-switcher2 #showInstructionBtn {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 11px !important;
    padding: 9px 16px !important;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.view-switcher2 #showInstructionBtn svg {
    fill: #38bdf8 !important;
    width: 17px !important;
    height: 17px !important;
    transition: transform 0.25s ease, fill 0.25s ease !important;
}

.view-switcher2 #showInstructionBtn:hover {
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.35), rgba(2, 132, 199, 0.5)) !important;
    border-color: rgba(56, 189, 248, 0.7) !important;
    box-shadow: 0 4px 18px rgba(0, 180, 216, 0.45) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.view-switcher2 #showInstructionBtn:hover svg {
    fill: #ffffff !important;
    transform: scale(1.15) !important;
}

/* ==========================================================================
   2. BOTTOM-LEFT LANDMARK FILTER CARD (#filter-panel)
   ========================================================================== */
#filter-panel {
    background: linear-gradient(165deg, rgba(11, 20, 38, 0.90) 0%, rgba(6, 11, 24, 0.97) 100%) !important;
    backdrop-filter: var(--p360-glass-blur) !important;
    -webkit-backdrop-filter: var(--p360-glass-blur) !important;
    border: 1px solid var(--p360-cyan-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--p360-shadow-luxury) !important;
    padding: 16px 20px !important;
    color: #ffffff !important;
    z-index: 9999 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-width: 250px !important;
}

#filter-panel:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 180, 216, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

#filter-panel .landmarkTitle {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    background: linear-gradient(90deg, #ffffff 0%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#filter-panel .landmarkTitle::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important;
    height: 16px !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #38bdf8 0%, #0077b6 100%) !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.9) !important;
}

#filter-panel .filter-divider {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.4), transparent) !important;
    margin: 10px 0 !important;
}

#filter-panel .filter-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 10px !important;
    margin: 3px 0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

#filter-panel .filter-toggle:hover {
    background: rgba(0, 180, 216, 0.12) !important;
    transform: translateX(3px) !important;
}

#filter-panel .filter-toggle span {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    transition: color 0.2s ease !important;
}

#filter-panel .filter-toggle:hover span {
    color: #ffffff !important;
}

/* Specific Category Color Dots */
#transit-filter span::before {
    content: '🚆 ' !important;
    font-size: 11px !important;
}
#roads-filter span::before {
    content: '🛣️ ' !important;
    font-size: 11px !important;
}
#school-college-filter span::before {
    content: '🎓 ' !important;
    font-size: 11px !important;
}
#hospital-filter span::before {
    content: '🏥 ' !important;
    font-size: 11px !important;
}
#grocery-filter span::before {
    content: '🛒 ' !important;
    font-size: 11px !important;
}
#water-filter span::before {
    content: '🌊 ' !important;
    font-size: 11px !important;
}
#multiplex-filter span::before {
    content: '🎬 ' !important;
    font-size: 11px !important;
}

/* Modern Pramukh Glowing Switches */
#filter-panel .switch {
    position: relative !important;
    display: inline-block !important;
    width: 36px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

#filter-panel .switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

#filter-panel .slider.round {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 20px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#filter-panel .slider.round:before {
    position: absolute !important;
    content: "" !important;
    height: 14px !important;
    width: 14px !important;
    left: 2px !important;
    bottom: 2px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#filter-panel input:checked + .slider.round {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    border-color: rgba(56, 189, 248, 0.75) !important;
    box-shadow: 0 0 14px rgba(0, 180, 216, 0.7) !important;
}

#filter-panel input:checked + .slider.round:before {
    transform: translateX(16px) !important;
    background: #ffffff !important;
}

#filter-panel .upArrow,
#filter-panel .downArrow {
    stroke: #38bdf8 !important;
    width: 18px !important;
    height: 18px !important;
}

/* ==========================================================================
   3. BOTTOM-CENTER NAVIGATION BAR (.view-switcher:not(.view-switcher2))
   ========================================================================== */
.view-switcher:not(.view-switcher2) {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    background: linear-gradient(135deg, rgba(10, 18, 36, 0.90) 0%, rgba(6, 12, 24, 0.97) 100%) !important;
    backdrop-filter: var(--p360-glass-blur) !important;
    -webkit-backdrop-filter: var(--p360-glass-blur) !important;
    border: 1px solid var(--p360-cyan-border) !important;
    border-radius: 9999px !important;
    box-shadow: var(--p360-shadow-luxury) !important;
    z-index: 9999 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.view-switcher:not(.view-switcher2):hover {
    border-color: rgba(56, 189, 248, 0.65) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 180, 216, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

.view-switcher .toggle-group {
    display: flex !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 9999px !important;
    padding: 3px !important;
    position: relative !important;
    gap: 3px !important;
}

.view-switcher .toggle-group .slider-pill {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 15px rgba(0, 180, 216, 0.4), 0 2px 6px rgba(0,0,0,0.25) !important;
}

.view-switcher .shreepad-btn {
    background: transparent !important;
    border: none !important;
    color: #cbd5e1 !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.35px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.view-switcher .shreepad-btn svg {
    width: 17px !important;
    height: 17px !important;
    fill: rgba(203, 213, 225, 0.85) !important;
    transition: all 0.25s ease !important;
}

.view-switcher .toggle-group .shreepad-btn.active-view {
    color: #0b1329 !important;
    font-weight: 700 !important;
}

.view-switcher .toggle-group .shreepad-btn.active-view svg {
    fill: #0077b6 !important;
    transform: scale(1.08) !important;
}

.view-switcher .shreepad-btn:hover:not(.active-view) {
    color: #ffffff !important;
    background: rgba(0, 180, 216, 0.16) !important;
    transform: translateY(-1px) !important;
}

.view-switcher .shreepad-btn:hover:not(.active-view) svg {
    fill: #38bdf8 !important;
}

#showFilterBtn,
#showStatusBtn {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 9999px !important;
    padding: 8px 18px !important;
}

#showFilterBtn:hover,
#showStatusBtn:hover {
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.28), rgba(2, 132, 199, 0.42)) !important;
    border-color: rgba(56, 189, 248, 0.65) !important;
    box-shadow: 0 4px 18px rgba(0, 180, 216, 0.38) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

#showStatusBtn svg,
#showStatusBtn svg path {
    fill: rgba(203, 213, 225, 0.85) !important;
    transition: fill 0.25s ease !important;
}

#showStatusBtn:hover svg,
#showStatusBtn:hover svg path {
    fill: #ffffff !important;
}

/* ==========================================================================
   4. BOTTOM-RIGHT FLOATING TOOLBAR (.floating-controls)
   ========================================================================== */
.floating-controls {
    position: fixed !important;
    bottom: 80px !important;
    right: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 10px 8px !important;
    background: linear-gradient(180deg, rgba(10, 18, 36, 0.90) 0%, rgba(6, 12, 24, 0.97) 100%) !important;
    backdrop-filter: var(--p360-glass-blur) !important;
    -webkit-backdrop-filter: var(--p360-glass-blur) !important;
    border: 1px solid var(--p360-cyan-border) !important;
    border-radius: 32px !important;
    box-shadow: var(--p360-shadow-luxury) !important;
    z-index: 99999 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.floating-controls:hover {
    border-color: rgba(56, 189, 248, 0.65) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 180, 216, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

.floating-controls .control-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
    position: relative !important;
}

.floating-controls .control-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #cbd5e1 !important;
    fill: none !important;
    transition: all 0.25s ease !important;
}

.floating-controls .control-btn circle,
.floating-controls .control-btn path,
.floating-controls .control-btn line {
    transition: all 0.25s ease !important;
}

.floating-controls .control-btn:hover {
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.35), rgba(2, 132, 199, 0.52)) !important;
    border-color: rgba(56, 189, 248, 0.75) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 0 18px rgba(0, 180, 216, 0.65) !important;
}

.floating-controls .control-btn:hover svg {
    stroke: #ffffff !important;
    transform: scale(1.08) !important;
}

/* WhatsApp Icon Special Neon-Green Hover Accent */
.floating-controls .control-btn[title*="WhatsApp"]:hover,
.floating-controls .control-btn[title*="whatsapp"]:hover {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.35), rgba(18, 140, 126, 0.55)) !important;
    border-color: rgba(37, 211, 102, 0.85) !important;
    box-shadow: 0 0 22px rgba(37, 211, 102, 0.75) !important;
}

/* ==========================================================================
   5. ABOUT US MODAL (#aboutUs) & PROPERTY FILTER SLIDE PANEL
   ========================================================================== */
#aboutUs {
    background: rgba(4, 9, 20, 0.78) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

#aboutUs .modal-box {
    background: linear-gradient(165deg, rgba(11, 20, 38, 0.96) 0%, rgba(6, 11, 24, 0.99) 100%) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border: 1px solid var(--p360-cyan-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 45px rgba(0, 180, 216, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

#aboutUs .modal-box h2 {
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, #ffffff 0%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

#aboutUs .about-logo {
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 10px 18px !important;
    border-radius: 14px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 4px 18px rgba(0, 180, 216, 0.3) !important;
}

#filter-slide-panel {
    background: linear-gradient(165deg, rgba(11, 20, 38, 0.95) 0%, rgba(6, 11, 24, 0.99) 100%) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border-right: 1px solid var(--p360-cyan-border) !important;
    box-shadow: 15px 0 50px rgba(0, 0, 0, 0.7) !important;
}

#filter-slide-panel .filter-header h3 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, #ffffff 0%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   6. GOOGLE MAPS MAP/SATELLITE SWITCHER CONTROLS
   ========================================================================== */
.gm-style-mtc > button,
.gm-style-mtc ul {
    background: rgba(11, 20, 38, 0.90) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    color: #ffffff !important;
    border: 1px solid var(--p360-cyan-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5) !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.gm-style-mtc > button:hover {
    background: rgba(0, 180, 216, 0.28) !important;
    border-color: rgba(56, 189, 248, 0.65) !important;
    color: #ffffff !important;
}