.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

#map {
width: 100%;
height: 600px;
margin: 0 auto;
border: 1px solid #000;
position: relative;
z-index: 1;
display: block;
border-radius: 8px;
}

/* Custom zoom control styling */
.leaflet-control-zoom {
border: none !important;
margin: 15px !important;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
background: #A20011 !important;
color: white !important;
border-radius: 4px !important;
width: 30px !important;
height: 30px !important;
line-height: 30px !important;
font-weight: bold !important;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
background: #A20011 !important;
}

/* Custom marker styles */
.custom-marker {
background-color: #A20011;
border-radius: 50%;
border: 2px solid white;
width: 12px !important;
height: 12px !important;
margin-left: -6px !important;
margin-top: -6px !important;
}

.custom-marker.distributor {
background-color: #A20011;
}

.custom-marker.dealer {
background-color: #666;
}

/* Popup styles */
.leaflet-popup-content-wrapper {
border-radius: 8px;
}

.leaflet-popup-content {
width: 205px;
margin: 15px;
font-family: "Toyota-Type-semiBold";
}

.location-info h3 {
margin: 0 0 8px 0;
color: #A20011;
font-family: "Toyota-Type-semiBold";
}

.location-info p {
margin: 4px 0;
font-size: 14px;
}

.map-container {
display: flex;
gap: 20px;
margin: 20px auto;
width: 100%;
}

#map {
flex: 1;
height: 600px;
border: 1px solid #ccc;
position: relative;
z-index: 1;
border-radius: 8px;
min-width: 0;
}

.distributors-list {
width: 300px;
height: 600px;
overflow-y: auto;
border: 1px solid #ccc;
border-radius: 8px;
padding: 0 15px 15px;
background: #fff;
position: relative;
}

.distributor-item:first-child {
padding-top: 45px;
}

.distributor-item {
padding: 15px;
border-bottom: 1px solid #eee;
cursor: pointer;
transition: background-color 0.2s;
}

.distributor-item:hover {
background-color: #f5f5f5;
}

.distributor-item h3 {
margin: 0;
color: #000000;
font-family: "Toyota-Type-semiBold";
font-size: 14px;
}

.distributor-item p {
margin: 4px 0;
font-size: 14px;
}

.distributor-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}

.distributor-item.expanded .distributor-details {
max-height: 500px;
margin-top: 10px;
}

/* Add expand/collapse indicator */
.distributor-item h3::after {
content: '+';
float: right;
color: #000000;
font-weight: bold;
}

.distributor-item.expanded h3::after {
content: '−';
}

.distributors-list-title {
padding: 15px;
background: #A20011;
color: white;
font-family: "Toyota-Type-semiBold";
border-radius: 8px 8px 0 0;
text-align: center;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 2;
margin: -15px -15px 0;
}

/* Update mobile styles */
@media (max-width: 768px) {
.map-container {
    flex-direction: column;
    gap: 10px;
    margin: 10px auto;
}

#map {
    width: 100%;
    height: 400px;
    min-height: 300px;
}

.distributors-list {
    width: 100%;
    height: 400px;
    margin-top: 10px;
}

.container {
    padding: 10px;
}

.distributor-item {
    padding: 10px;
}

.distributors-list-title {
    padding: 12px;
}

/* Ensure popups are readable on mobile */
.leaflet-popup-content {
    width: 200px !important;
    font-size: 14px;
}
}

/* Add styles for very small screens */
@media (max-width: 480px) {
#map {
    height: 350px;
}

.distributors-list {
    height: 350px;
}
}

/* Scrollbar styling */
.distributors-list::-webkit-scrollbar {
width: 10px;
}

.distributors-list::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.distributors-list::-webkit-scrollbar-thumb {
background: #A20011;
border-radius: 10px;
border: 2px solid #f1f1f1;
}

.distributors-list::-webkit-scrollbar-thumb:hover {
background: #8a0010;
}

/* Hide the arrows */
.distributors-list::-webkit-scrollbar-button {
display: none;
}

/* For Firefox */
.distributors-list {
scrollbar-width: thin;
scrollbar-color: #A20011 #f1f1f1;
}

/* Add error message styling */
.map-error-message {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
display: none;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
z-index: 1000;
}

.map-error-content {
max-width: 400px;
}

.map-error-content h3 {
color: #A20011;
margin-bottom: 15px;
font-family: "Toyota-Type-semiBold";
}

.map-error-content p {
margin: 10px 0;
line-height: 1.4;
}

.map-error-content a {
color: #A20011;
text-decoration: underline;
}