/* Header styles */
.common_color1{
    line-height: 24px;
}
.container{
    width:1180px !important;
}

 #store-top-container * {
     font-family: 'Roboto-regular' !important;

 }

 .sidebar *,
 .store-card * {
     font-family: 'Roboto-regular' !important;

 }

 #store-top-container {
    padding: 52px 20px 40px;
    max-width: 1350px;
    margin: 0 auto;
    padding-top: 40px;
    padding-left: 0px;
    padding-right: 0px;

 }

 #store-top-container h1 {
     color: #003087;
     font-weight: 700;
     font-size: 30px;
     margin-bottom: 0px;
     line-height: 1.6;
     font-family: 'Roboto-bold' !important;
    margin-bottom: 17px;
 }


 #store-top-container p.description {
     color: #003087;
     font-size: 18px;
     line-height: 1.5;
 }

 /* Main layout container */
 #custom-store-locator {
     display: flex;
     gap: 20px;
     max-width: 1350px;
     margin: 0 auto;
     padding: 0 20px 40px;
     min-height: 600px;
     padding-left: 0px;
     padding-right: 0px;
 }

 /* Filter Sidebar */
 .sidebar {
     width: 20%;
     flex-shrink: 0;
     background: #ffffff;
     border-right: 2px solid #e5e7eb;
     padding: 0px;
     /* height: 540px; */
     /* height: 763px; */
 }

 .sidebar h3 {
     color: #003087 !important;
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 7px;
 }

 .filter-section {
     margin-bottom: 0px;
 }

 .filter-section:last-child {
     margin-bottom: 0;
 }

 .filter-section h4 {
     color: #003087;
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 4px;
 }

 .category-tree {
     list-style: none;
 }

 .category-item {
     margin-bottom: 0px;
 }

 .child-categories {
     margin-left: 0px;
     margin-top: 2px;
 }

 .child-category-item {
     margin-bottom: 2px;
 }

 .category-label {
     display: flex;
     align-items: center;
     gap: 5px;
     cursor: pointer;
     padding: 4px 0px;
     border-radius: 4px;
     transition: background-color 0.2s;
     font-size: 14px;
     margin-top: 5px;
 }

 .category-label:hover {
     background-color: #f0f9ff;
 }

 .category-label.inactive {
     opacity: 0.6;
     cursor: default;
 }

 .category-label.inactive:hover {
     background-color: transparent;
 }

 .category-label input[type="checkbox"] {
     width: 16px;
     height: 16px;
     accent-color: #003087;
     cursor: pointer;
 }


 .cat-name {
     color: #003087;
     line-height: 0.8;
     font-size: 15px;
 }

 .inactive .cat-name {
     color: #003087;
 }

 .distance-value {
     color: #003087;
     font-weight: 600;
     font-size: 14px;
 }

 /* Store listings */
 .store-list {
     /* flex: 1; */
     width: 30%;
     overflow-y: auto;
     max-height: 545px;
     padding-right: 10px;
     padding-top: 24px;
 }

 .store-card {
     background: white;
     padding: 13px 0px;
     margin-bottom: 0px;

 }



 .store-content {
     display: flex;
     gap: 16px;
     align-items: flex-start;
 }

 .store-icon {
     flex-shrink: 0;
     margin-top: 2px;
 }

 .map-pin {
     width: 33px;
     height: 33px;
     color: #003087;
     fill: currentColor;
 }

 .store-details {
     flex: 1;
 }

 .store-name {
     margin: 0 0 1px 0;
     font-size: 16px !important;
     font-weight: bold;
     color: #003087 !important;
     line-height: 1.3;
 }

 .store-address {
     margin-bottom: 12px;
 }

 .store-address p {
     margin: 0;
     font-size: 14px;
     color: #4b5563;
     line-height: 1.5;
 }

 .store-phone {
     margin: 0px;
     font-size: 16px;
     font-weight: 500;
     color: #374151;
 }

 .store-distance {
     margin: 0px;
     font-size: 16px;
     color: #6b7280;
 }

 .store-links {
     margin-top: 0px;
 }

 .store-links a {
     font-size: 14px;
     color: #003087;
     text-decoration: underline;
     line-height: 1.8;
 }

 .store-links a:hover {
     color: #1d4ed8;
 }

 /* Map wrapper */
 .map-wrapper {
     width: 45.4%;
     flex-shrink: 0;
     position: relative;
 }

 #store-map {
     width: 100%;
     height: 606px;
     
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 50%, #dbeafe 100%);
 }

 .map-background {
     position: absolute;
     inset: 0;
     background-image:
         radial-gradient(circle at 30% 40%, rgba(134, 239, 172, 0.6) 0%, transparent 50%),
         radial-gradient(circle at 70% 60%, rgba(74, 222, 128, 0.6) 0%, transparent 50%),
         radial-gradient(circle at 50% 80%, rgba(134, 239, 172, 0.6) 0%, transparent 50%);
 }

 .map-controls {
     position: absolute;
     top: 16px;
     right: 16px;
     display: flex;
     flex-direction: column;
     gap: 4px;
     z-index: 10;
 }

 .map-control {
     background: white;
     border: 1px solid #d1d5db;
     border-radius: 6px;
     padding: 8px;
     cursor: pointer;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     transition: all 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .map-control:hover {
     background: #f9fafb;
 }

 .map-control svg {
     width: 16px;
     height: 16px;
     color: #6b7280;
 }

 .store-marker {
     position: absolute;
     cursor: pointer;
     transform: translate(-50%, -50%);
     transition: transform 0.2s ease;
     z-index: 5;
 }

 .store-marker:hover {
     transform: translate(-50%, -50%) scale(1.2);
     z-index: 6;
 }

 .marker-dot {
     width: 28px;
     height: 28px;
     background: #003087;
     border: 3px solid white;
     border-radius: 50%;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .marker-dot::after {
     content: '';
     width: 8px;
     height: 8px;
     background: white;
     border-radius: 50%;
 }

 .map-attribution {
     position: absolute;
     bottom: 8px;
     left: 8px;
     font-size: 10px;
     color: #6b7280;
     background: rgba(255, 255, 255, 0.9);
     padding: 4px 8px;
     border-radius: 4px;
     backdrop-filter: blur(4px);
 }

 /* Hide native checkbox appearance */
 input.category-filter[type="checkbox"] {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     width: 16px;
     height: 16px;
     border: 2px solid #003087;
     /* blue border */
     margin-right: 6px;
     position: relative;
     cursor: pointer;
 }

 /* When checked, fill with color */
 input.category-filter[type="checkbox"]:checked {
     background-color: #003087;
     /* fill color */
     border-color: #003087;
 }

 /* Optional: remove checkmark */
 input.category-filter[type="checkbox"]::after {
     content: '';
     display: none;
 }

 /* WebKit (Chrome, Safari, Edge) */
 .store-list::-webkit-scrollbar {
     width: 8px;
 }

 .store-list::-webkit-scrollbar-track {
     background: #f5f5f5;
     border-radius: 4px;
 }

 .store-list::-webkit-scrollbar-thumb {
     background-color: #c1c1c1;
     border-radius: 4px;
     border: 2px solid transparent;
     background-clip: content-box;
 }

 .store-list::-webkit-scrollbar-thumb:hover {
     background-color: #999;
 }

 select {
     color: #003087;

 }

 @media (max-width: 780px) {
     .sidebar {
         width: 50%;
     }
     .store-list{
        width:50%
     }
     .map-wrapper {
         display: none;
     }
 }
 

 @media (max-width: 558px) {
     #store-top-container {
         padding: 0px 16px 0px;
         margin-top:30px;
     }

     #custom-store-locator {
         padding: 0 16px 24px;
         gap: 16px;
         flex-direction: column;
     }

     #store-top-container h1 {
         font-size: 30px;
         margin-bottom: 0px;
         margin-bottom: 17px;
     }

     .sidebar {
         padding: 20px;
     }

     .store-name {
         font-size: 16px;
     }

     .sidebar h3 {
         margin-bottom: 0px;
     }

     .child-categories {
         margin-left: 0px;
     }

     .sidebar {
         border-right: none;
     }

     .store-card {
         padding: 10px 0px;
     }

     #store-map {
         width: 100%;
         height: 100%;
     }

     #last-section {
         display: none;
     }

     .map-wrapper {
         display: none;
     }

     .store-list {
         width: 100%;
         height: 507px;

     }

     #store-top-container p.description {
         color: #003087;
         font-size: 15px;
         line-height: 1.5;
     }


 }