/* Reset default margins and set full height */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Body layout: column flex */
body {
    display: flex;
    flex-direction: column; /* top-down layout */
}

/* Header naturally sized */
header {
    flex: 0 0 auto; /* natural height of header */
}

/* Map container: fills remaining space */
#map-container {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto; /* fills the remaining viewport height */
    width: 100%;
    position: relative;
    overflow: hidden;
    height: calc(100vh - 284.5px); /* adjust if header height changes */
}


/* Desktop-only elements */
.desktop-only {
    display: block;
}

/* Panel styling: responsive width */
#panel {
    position: absolute; /* overlay on map */
    top: 0;
    left: 0;
    width: clamp(300px, 18%, 500px); /* min 300px, 18% of screen, max 500px */
    height: 100%;
    background: linear-gradient(to bottom, #ffffff 0%, #e0e7ff 100%);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.3s ease, width 0.3s ease;
    z-index: 2;
}

/* Map fills remaining space */
#map {
    flex: 1;
    position: relative;
    height: 100%;
}

/* Toggle button (desktop) */
#toggleBtn {
    display: none; /* shown only if panel has content */
    position: absolute;
    top: 10px;
    width: 30px;
    height: 30px;
    background: #fff;       /* white background */
    color: black;           /* black text / icon */
    font-size: 18px;
    border: 1px solid black; /* black border */
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
    transition: left 0.3s ease, transform 0.3s ease;
}



/* wrapper to move chevron */
.chevron-wrapper {
    display: inline-block;
    position: relative;
    top: -1px; /* move the chevron up 2px */
}

/* actual chevron */
.chevron {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(-45deg); /* closed state */
    transition: transform 0.3s ease;
}

/* rotate chevron when panel is open */
#toggleBtn.open .chevron {
    transform: rotate(135deg);
}



/* Mobile: hide panel, toggle button, and desktop-only elements */
@media (max-width: 768px) {
    #panel,
    #toggleBtn,
    .desktop-only {
        display: none !important;
    }

    #map {
        height: 100%;
    }
}








/* Center the whole control strip on desktop */
#control-strip {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    flex-direction: column; /* stack search + filters */
    align-items: center;    /* center children horizontally */
    gap: 12px;
    padding: 24px 12px;
    background: #b0c6eb;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);

    width: 100%;            /* full width of parent */
    max-width: none;        /* allow full-width background */
}

/* NEW: inner container to shrink content inward */
#control-strip-inner {
    width: 100%;
    max-width: 600px;       /* content width controlled here */
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 auto;         /* center inside control strip */
}

/* Search container stays full width inside inner container */
.search-container {
    width: 100%;            /* fill inner container */
    min-width: 250px;
}

/* Search bar: wide, modern */
#pac-input {
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: all 0.2s ease-in-out;
}

#pac-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 3px 8px rgba(79,70,229,0.2);
}

/* Filters container: side by side on desktop */
#dropdwn1 {
    display: flex;
    gap: 8px;
    width: 100%;              /* fill inner container */
    justify-content: center;   /* center dropdowns horizontally */
}

#type_filter {
    flex: 1 1 30%;            /* slightly smaller */
    min-width: 120px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #fafafa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

#dropdown_menu1 {
    flex: 1 1 70%;            /* slightly bigger */
    min-width: 120px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #fafafa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

#type_filter:hover,
#dropdown_menu1:hover,
#type_filter:focus,
#dropdown_menu1:focus {
    border-color: #4f46e5;
    box-shadow: 0 2px 6px rgba(79,70,229,0.15);
    outline: none;
}

/* Mobile tweaks */
@media (max-width: 768px) {
    #map-container {
        height: calc(100dvh - 220px);
    }
    #control-strip {
        width: 100vw;   /* full screen width */
        padding: 12px 8px;
        gap: 4px;
    }

    #control-strip-inner {
        max-width: 100%;  /* inner fills on mobile */
        padding: 0 8px;
    }

    .search-container {
        flex: 1 1 100%; /* full width */
    }

    #pac-input {
        width: 100%;    /* fill the container */
        margin-bottom: 6px;
    }

    #dropdwn1 {
        flex: 1 1 100%;
        gap: 4px;
    }

    #dropdown_menu1 {
        flex: 2 1 60%; /* grows twice as much as type */
        min-width: 150px;
        height: 40px;
    }
    
    #type_filter {
        flex: 1 1 35%; /* smaller */
        min-width: 120px;
        height: 40px;
    }
}




























































/* --- Panel Item Styling --- */

/* Each store panel container */
.panelcontainer {
    display: flex;
    align-items: center;
    gap: 12px;                 /* space between image and text */
    padding: 10px 12px;
    margin-bottom: 8px;        /* spacing between panels */
    background-color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Highlight active panel */
.panelcontainer.active {
    background-color: #f0f4ff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
    transform: translateX(2px); /* subtle push to indicate selection */
}

/* Left div: image container */
.paneldiv1 {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Store image */
.imgListnew {
    width: 48px;
    height: 48px;
    border-radius: 50%;       /* circular */
    object-fit: cover;
    border: 1px solid #ddd;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Right div: text content */
.paneldiv2 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* Store name */
.nameonlistnew {
    font-weight: 600;
    font-size: 1em;
    color: #111827;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Type and distance line */
.listtypeanddistance {
    font-size: 0.85em;
    color: #6b7280;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Specific styling for type */
.listtypeanddistance.type {
    font-style: italic;
}

/* Specific styling for distance */
.listtypeanddistance.distance {
    font-weight: 500;
}

/* Pills for categories inside InfoWindow (if used) */
.panelcontainer .category-pill {
    display: inline-block;
    background-color: #e0e0e0;
    color: #333;
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 12px;
    margin: 2px 2px 0 0;
}

/* Hover effect */
.panelcontainer:hover {
    background-color: #f9fafb;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .panelcontainer {
        padding: 8px 10px;
        gap: 8px;
    }

    .imgListnew {
        width: 40px;
        height: 40px;
    }

    .nameonlistnew {
        font-size: 0.95em;
    }

    .listtypeanddistance {
        font-size: 0.8em;
    }
}