/* components.css — Timeline, cards, modals, popups, map & feedback UI */

                /* Alert Popup Mobile Styles */
        @media (max-width: 640px) {
            #alertPopupContent {
                border-radius: 1.25rem;
                max-width: 90vw;
            }
            #alertPopupContent .w-14 {
                width: 3rem;
                height: 3rem;
            }
            #alertPopupContent h3 {
                font-size: 1rem;
            }
            #alertPopupContent p {
                font-size: 0.75rem;
            }
            #alertPopupContent button {
                padding: 0.625rem;
                font-size: 0.75rem;
            }
      
            #feedbackImagePreview img {
                height: 7rem;
            }
            #feedbackHistory h4 {
                font-size: 0.625rem;
            }
       
    footer .grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    footer .grid-cols-3 > div {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 14px;
        padding: 14px 16px;
    }
    footer .grid-cols-3 h4 {
        font-size: 10px !important;
        margin-bottom: 10px !important;
    }
    footer .grid-cols-3 .text-lg {
        font-size: 22px !important;
    }
    footer .flex.items-start.gap-3\.5 {
        flex-direction: column;
        text-align: center;
        align-items: center !important;
    }
    footer .flex.items-start.gap-3\.5 > div:first-child {
        margin: 0 auto;
    }
    footer .bg-white\/5 {
        flex-direction: column;
        text-align: center;
        gap: 10px !important;
    }
    footer .bg-white\/5 .ml-auto {
        margin-left: 0 !important;
    }
    footer .border-t .flex.items-center {
        flex-direction: column;
        gap: 10px !important;
    }
    footer .border-t .bg-white\/5 {
        width: 100%;
        justify-content: center;
    }
footer .bg-white\/5.group {
    flex-direction: row !important;
    text-align: left !important;
    gap: 0.25rem !important;
}
}
      
        @media (pointer: coarse) {
            #feedbackImage + label:hover {
                background: #f8fafc;
                border-color: #cbd5e1;
            }
        }
    
        #feedbackAlert button:active {
            transform: scale(0.9);
        }
        @media (max-width: 640px) {
            #feedbackAlert {
                padding: 0.625rem 0.75rem;
            }
            #feedbackAlert .w-7 {
                width: 1.5rem;
                height: 1.5rem;
            }
            #feedbackAlert span {
                font-size: 0.6875rem;
            }
        }
                .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* Column Header Responsive Fix */
        .time-col-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .time-col-header span:first-child {
            flex: 1;
        }
        
        .time-col-header > div {
            display: flex;
            gap: 0.5rem;
            flex-shrink: 0;
        }
        
        .time-col-header span {
            white-space: nowrap;
        }
        
        @media (max-width: 640px) {
            .time-col-header {
                padding: 0.5rem !important;
                gap: 0.5rem;
            }
            .time-col-header > div {
                gap: 0 !important;
            }
            .time-col-header span {
                font-size: 0.7rem !important;
            }
        }
        
        /* Graph Modal Styles */
        .graph-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 60;
            padding: 1rem;
        }
        
        .graph-modal.hidden {
            display: none;
        }
        
        .graph-modal-content {
            background: white;
            border-radius: 1rem;
            padding: 1.5rem;
            max-width: 500px;
            width: 100%;
            max-height: 80vh;
            height: 75vh; 
            display: flex;        
flex-direction: column; 
            overflow-y: auto;
            transform: scale(0.95);
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .graph-modal-content.show {
            transform: scale(1);
            opacity: 1;
        }
        
        @media (max-width: 640px) {
            .graph-modal-content {
                max-width: 95vw;
                padding: 1rem;
                border-radius: 0.75rem;
            }
        }
        #feedbackForm textarea:focus, #feedbackForm select:focus {
            border-color: #0f4c3a;
            box-shadow: 0 0 0 3px rgba(15, 76, 58, 0.1);
        }
        .expand-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, padding 0.4s ease;
            opacity: 0;
        }
        .expand-content.open {
            max-height: none;
            opacity: 1;
        }
        .timeline-line {
            position: absolute;
            left: 15px;
            top: 28px;
            bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, #0f4c3a, #d4a017);
            border-radius: 3px;
        }
        .stop-marker {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 3px solid #d4a017;
            background: white;
            position: absolute;
            left: 8px;
            top: 4px;
            z-index: 10;
            transition: all 0.3s ease;
        }
        .stop-marker.start {
            width: 22px;
            height: 22px;
            left: 6px;
            background: #0f4c3a;
            border-color: #0f4c3a;
        }
        .stop-marker.end {
            width: 22px;
            height: 22px;
            left: 6px;
            background: #c0392b;
            border-color: #c0392b;
        }
        .stop-marker.current {
            background: #d4a017;
            border-color: #d4a017;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.4); }
            50% { box-shadow: 0 0 0 8px rgba(212, 160, 23, 0); }
        }
        .expand-btn {
            transition: all 0.3s ease;
        }
        .expand-btn:hover {
            background: #0f4c3a;
            color: white;
        }
        .expand-btn.active {
            background: #0f4c3a;
            color: white;
        }
        .expand-btn.active i {
            transform: rotate(180deg);
        }
        .expand-btn i {
            transition: transform 0.3s ease;
        }
        .stop-row {
            transition: all 0.2s ease;
        }
        .stop-marker.filled {
            background: #0f4c3a;
            border-color: #0f4c3a;
        }
        .timeline-line.filled {
            background: #0f4c3a;
        }
        .timeline-line.upcoming {
            background: #e5e7eb;
        }
        /* Modal styles */
        .modal-overlay {
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
        }
        .modal-content {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        /* Vote button styles */
        .vote-btn {
            transition: all 0.2s ease;
        }
        .vote-btn:hover {
            transform: scale(1.05);
        }
        .vote-btn.voted {
            background: #ffffff;
            color: rgb(199, 27, 27);
            border-color: #d8d8d8;
            
        }
        .time-picker-wheel { 
            position: relative; 
            user-select: none; }
.wheel-column { 
    scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch; 
    position: relative;
    z-index: 2;
    scroll-snap-type: y mandatory;
scrollbar-width: none;        /* ← Firefox */
    -ms-overflow-style: none;     
}
.wheel-column::-webkit-scrollbar { 
    display: none; }

.wheel-item { 
height: 36px;
    min-height: 36px;        /* ← নতুন */
    flex-shrink: 0;  
     display: flex;
     align-items: center; 
     justify-content: center;
      font-size: 1.25rem; 
      font-weight: 600;
       color: #94a3b8; 
       scroll-snap-align: center;
     }
.wheel-item.active { 
  color: #000;
    transform: scale(1.08);  
     font-size: 1.7rem; 

    }
.wheel-highlight {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    background: #f1f5f9;
    border-radius: 10px;
    z-index: 1;             
    pointer-events: none;
}
.wheel-mask-top, .wheel-mask-bottom {
    position: absolute;
    left: 0; right: 0;
height: 54px;  
    pointer-events: none;
    z-index: 3;
}
.wheel-mask-top {
    top: 0;
    background: linear-gradient(to bottom, white 40%, transparent 100%);
}
.wheel-mask-bottom {
    bottom: 0;
    background: linear-gradient(to top, white 40%, transparent 100%);
}
        /* Report button */
        .report-btn {
            transition: all 0.2s ease;
        }
        .report-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        /* Crowd input */
        .crowd-input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        /* Sync indicator */
        .sync-indicator {
            animation: pulse 2s infinite;
        }
        /* Column header sticky */
        .column-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: #f8fafc;
        }

        /* Feedback card mobile */
        @media (max-width: 640px) {
            #feedbackList > div {
                border-radius: 1rem;
            }
            #feedbackList .w-8 {
                width: 1.75rem;
                height: 1.75rem;
                font-size: 0.625rem;
            }
            #feedbackList img {
                height: 5rem;
            }
            #feedbackList img.h-auto {
                height: auto;
                max-height: 70vh;
            }
            .wheel-mask-top, .wheel-mask-bottom {
        height: 78px;  
    }
        }
        @media (max-width: 380px) {
            #feedbackList .text-xs {
                font-size: 0.6875rem;
            }
            #feedbackList .text-\[10px\] {
                font-size: 0.5625rem;
            }
        }        @media (max-width: 640px) {
            /* Header adjustments */
            header .text-\[1\.2rem\] {
                font-size: 1.05rem !important;
            }
            header .text-\[11px\] {
                font-size: 10px !important;
            }
            header .text-\[10px\] {
                font-size: 9px !important;
            }

            /* Filter buttons - 2x2 grid on small screens */
            .filter-grid {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 6px !important;
            }
            .filter-grid button {
                font-size: 11px !important;
                padding: 8px 4px !important;
            }

            /* Direction toggle buttons */
            .dir-toggle-btn {
                font-size: 12px !important;
                padding: 10px 8px !important;
            }
            .dir-toggle-btn i {
                font-size: 11px;
            }

            /* Time tabs */
            .btn-time-tab {
                padding: 8px 12px !important;
                font-size: 12px !important;
            }

            /* Stop timeline adjustments */
            .stop-row {
                padding-left: 28px !important;
            }
            .timeline-line {
                left: 11px !important;
            }
            .stop-marker {
                width: 15px !important;
                height: 15px !important;
                left: 5px !important;
                border-width: 2px !important;
            }
            .stop-marker.start,
            .stop-marker.end {
                width: 18px !important;
                height: 18px !important;
                left: 4px !important;
            }
            .stop-marker.current {
                width: 16px !important;
                height: 16px !important;
                left: 4px !important;
            }

            /* Time columns in stop rows */
            .time-col-header {
                gap: 4px !important;
            }
            .time-col-header span {
                font-size: 9px !important;
                width: auto !important;
                min-width: 56px;
            }
            .time-badge {
                font-size: 11px !important;
                padding: 2px 6px !important;
                min-width: 52px;
            }
            .time-col-wrap {
                gap: 4px !important;
                margin-left: 6px !important;
            }

            /* Card route info row */
            .route-info-row {
                flex-wrap: wrap !important;
                gap: 4px !important;
                font-size: 11px !important;
            }

            /* Modal adjustments */
            .modal-content {
                border-radius: 1.5rem 1.5rem 0 0 !important;
                max-height: 90vh !important;
            }
            .modal-header {
                padding: 12px 16px !important;
            }
            .modal-body {
                padding: 12px 16px !important;
            }

            /* Expand button */
            .expand-btn {
                font-size: 12px !important;
                padding: 8px !important;
            }

            /* Report buttons in stop rows */
            .report-action-btn {
                font-size: 10px !important;
                padding: 4px 8px !important;
            }

            /* Stop name text */
            .stop-name-text {
                font-size: 13px !important;
            }

            /* Card header */
            .card-header-dest {
                font-size: 14px !important;
            }
            .card-header-time {
                font-size: 15px !important;
            }

            /* Results header */
            .results-header {
                font-size: 12px !important;
            }

            /* Footer adjustments */
            footer .bg-blue-50 {
                padding: 10px !important;
            }
        }
        /* ===== MAP POPUP STYLES ===== */
.map-popup-overlay {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
}
.map-popup-content {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.map-popup-content.open {
    transform: scale(1);
    opacity: 1;
}
.map-popup-content.closed {
    transform: scale(0.9);
    opacity: 0;
}
.route-info-row {
    cursor: pointer;
    transition: all 0.2s ease;
}
.route-info-row:hover {
    background: #f0fdf4 !important;
    border-color: #0f4c3a !important;
}
.route-info-row:active {
    transform: scale(0.98);
}
#mapContainer {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border-radius: 1rem;
}
.map-header-btn {
    transition: all 0.2s ease;
}
.map-header-btn:hover {
    background: #f1f5f9;
}
.map-header-btn:active {
    transform: scale(0.95);
}
        @media (max-width: 640px) {
            #scheduleImageContent {
                border-radius: 1rem;
                max-width: 95vw;
            }
            #scheduleImageContent img {
                max-height: 60vh;
            }
        }
        @media (max-width: 380px) {
            #scheduleImageContent h3 {
                font-size: 0.875rem;
            }
        }
@media (max-width: 640px) {
    #mapContainer {
        min-height: 250px;
        border-radius: 0.75rem;
    }
    .map-popup-header {
        padding: 10px 14px !important;
    }
    .map-popup-body {
        padding: 10px 14px !important;
    }
    .map-popup-footer {
        padding: 10px 14px !important;
    }
}
/* Leaflet Custom Marker Styles */
.custom-marker {
    background: transparent !important;
    border: none !important;
}
.leaflet-popup-content-wrapper {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.leaflet-popup-content {
    margin: 8px 12px;
    font-family: 'Noto Sans Bengali', sans-serif;
}
.leaflet-container {
    font-family: 'Noto Sans Bengali', sans-serif;
}
        
        /* Touch device optimizations */
        @media (pointer: coarse) {
            .expand-btn:hover {
                background: transparent;
                color: inherit;
            }
            .expand-btn:active {
                background: #0f4c3a;
                color: white;
                transform: scale(0.98);
            }
            .vote-btn:hover {
                transform: none;
            }
            .vote-btn:active {
                transform: scale(0.95);
            }
            .report-btn:hover {
                transform: none;
                box-shadow: none;
            }
            .report-btn:active {
                transform: scale(0.98);
            }

        }
            @media (max-width: 380px) {
            #feedbackImagePreview img {
                height: 6rem;
            } #alertPopupContent {
                border-radius: 1rem;
            }
            #alertPopupContent .w-14 {
                width: 2.75rem;
                height: 2.75rem;
            }
            #alertPopupContent h3 {
                font-size: 0.9375rem;
            }
        
             #feedbackAlert {
            animation: fadeIn 0.3s ease-out;
             }
        header h1 {
        font-size: 0.95rem !important;
        letter-spacing: 0 !important;
        }
            #feedbackImagePreview img {
                height: 6rem;
            } #alertPopupContent {
                border-radius: 1rem;
            }
            #alertPopupContent .w-14 {
                width: 2.75rem;
                height: 2.75rem;
            }
            #alertPopupContent h3 {
                font-size: 0.9375rem;
            }
            .filter-grid button {
                font-size: 10px !important;
            }
            .dir-toggle-btn {
                font-size: 11px !important;
                padding: 8px 4px !important;
            }
            .dir-toggle-btn span {
                font-size: 11px;
            }
            .card-header-dest {
                font-size: 13px !important;
            }
            .card-header-time {
                font-size: 14px !important;
            }
            .time-badge {
                font-size: 10px !important;
                min-width: 48px;
            }
        }


        /* Ensure proper height on mobile browsers */
        @supports (height: 100dvh) {
            .min-h-screen {
                min-height: 100dvh;
            }
        }
                /* Like button mobile fixes */
        @media (max-width: 640px) {
            #feedbackList button {
                padding: 0.25rem 0.625rem;
                font-size: 0.625rem;
            }
            #feedbackList button i {
                font-size: 0.625rem;
            }
        }
        @media (pointer: coarse) {
            #feedbackList button:hover {
                background: #f1f5f9;
                color: #94a3b8;
                border-color: #e2e8f0;
            }
            #feedbackList button:active {
                transform: scale(0.9);
            }
        }
        /* ===== BEAUTIFUL SEARCH ===== */
#searchSuggestions {
    animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.search-suggestion-item {
    transition: all 0.15s ease;
    position: relative;
}
.search-suggestion-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #0f4c3a;
    opacity: 0;
    transition: opacity 0.15s ease;
    border-radius: 0 3px 3px 0;
}
.search-suggestion-item:hover::before,
.search-suggestion-item.active::before {
    opacity: 1;
}
.search-suggestion-item:hover,
.search-suggestion-item.active {
    background: #f0fdf4;
}
.search-suggestion-item:active {
    background: #dcfce7;
}
.search-suggestion-item .suggestion-icon {
    transition: transform 0.2s ease;
}
.search-suggestion-item:hover .suggestion-icon,
.search-suggestion-item.active .suggestion-icon {
    transform: scale(1.2);
}
/* Highlight matched text */
.search-highlight {
    color: #0f4c3a;
    font-weight: 800;
    background: linear-gradient(180deg, transparent 60%, #fef3c7 60%);
    padding: 0 1px;
}
/* Search input focus glow */
#searchInput:focus {
    box-shadow: 0 0 0 4px rgba(15, 76, 58, 0.08), 0 4px 20px rgba(15, 76, 58, 0.08);
}
/* Mobile optimizations */
@media (max-width: 640px) {
    #searchSuggestions {
        position: sticky !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        margin-top: 4px !important;
        max-height: 70vh;
        border-radius: 1rem;
    }
    #searchSuggestions .max-h-64 {
        max-height: 50vh;
    }
}@keyframes goldPulse {
    0%, 100% { box-shadow: 0 8px 20px -4px rgba(212, 160, 23, 0.35); }
    50% { box-shadow: 0 12px 30px -4px rgba(212, 160, 23, 0.55); }
}
#feedbackHistory button[onclick="openAllFeedbackPopup()"] {
    animation: goldPulse 2.5s ease-in-out infinite;
}