/* Fix z-index for language dropdown to appear above geocoder */
.leaflet-top, .leaflet-bottom {
    z-index: 500 !important;
}
.leaflet-control {
    z-index: 500 !important;
}
.leaflet-control-geocoder {
    z-index: 500 !important;
}

/* Override minified CSS with higher specificity */
.leaflet-control-geocoder.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
}
.leaflet-control-geocoder{border-radius:4px;background:#fff;min-width:26px;min-height:26px}.leaflet-touch .leaflet-control-geocoder{min-width:30px;min-height:30px}.leaflet-control-geocoder a,.leaflet-control-geocoder .leaflet-control-geocoder-icon{border-bottom:none;display:inline-block}.leaflet-control-geocoder .leaflet-control-geocoder-alternatives a{width:inherit;height:inherit;line-height:inherit}.leaflet-control-geocoder a:hover,.leaflet-control-geocoder .leaflet-control-geocoder-icon:hover{border-bottom:none;display:inline-block}.leaflet-control-geocoder-form{display:none;vertical-align:middle}.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form{display:inline-block}.leaflet-control-geocoder-form input{font-size:120%;border:0;background-color:transparent;width:246px}.leaflet-control-geocoder-icon{border-radius:4px;width:26px;height:26px;border:none;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.2 13l3.4 6.6c.6 1.1 2.5-.4 2-1.2l-4-6.2z'/%3E%3Ccircle cx='10.8' cy='8.9' r='3.9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;cursor:pointer}.leaflet-touch .leaflet-control-geocoder-icon{width:30px;height:30px}.leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23000' stroke-linecap='round' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Cg%3E%3Cpath stroke-opacity='.1' d='M14 8.4l3-5'/%3E%3Cpath stroke-opacity='.2' d='M15.6 10l5-3'/%3E%3Cpath stroke-opacity='.3' d='M16.2 12H22'/%3E%3Cpath stroke-opacity='.4' d='M15.6 14l5 3m-6.5-1.4l2.9 5'/%3E%3Cpath stroke-opacity='.5' d='M12 16.2V22m-2-6.4l-3 5'/%3E%3Cpath stroke-opacity='.6' d='M8.4 14l-5 3'/%3E%3Cpath stroke-opacity='.7' d='M7.8 12H2'/%3E%3Cpath stroke-opacity='.8' d='M8.4 10l-5-3'/%3E%3Cpath stroke-opacity='.9' d='M10 8.4l-3-5'/%3E%3Cpath d='M12 7.8V2'/%3E%3CanimateTransform attributeName='transform' calcMode='discrete' dur='1s' repeatCount='indefinite' type='rotate' values='0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12'/%3E%3C/g%3E%3C/svg%3E")}.leaflet-control-geocoder-form-no-error{display:none}.leaflet-control-geocoder-form input:focus{outline:none}.leaflet-control-geocoder-form button{display:none}.leaflet-control-geocoder-error{margin-top:8px;margin-left:8px;display:block;color:#444}.leaflet-control-geocoder-alternatives{display:block;width:272px;list-style:none;padding:0;margin:0}.leaflet-control-geocoder-alternatives-minimized{display:none;height:0}.leaflet-control-geocoder-alternatives li{white-space:nowrap;display:block;overflow:hidden;padding:5px 8px;text-overflow:ellipsis;border-bottom:1px solid #ccc;cursor:pointer}.leaflet-control-geocoder-alternatives li a,.leaflet-control-geocoder-alternatives li a:hover{width:inherit;height:inherit;line-height:inherit;background:inherit;border-radius:inherit;text-align:left}.leaflet-control-geocoder-alternatives li:last-child{border-bottom:none}.leaflet-control-geocoder-alternatives li:hover,.leaflet-control-geocoder-selected{background-color:#f5f5f5}.leaflet-control-geocoder-address-context{color:#666}
.leaflet-control-geocoder {
    min-width: 480px;
    max-width: 480px;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.07);
    border: none;
    padding: 0.5rem 0.75rem;
    transition: box-shadow 0.2s;
    display: flex;
    align-items: center;
}

/* Force width on expanded geocoder with full class chain to beat library defaults */
.leaflet-control-geocoder.leaflet-bar.leaflet-control-geocoder-expanded.leaflet-control {
    width: 480px !important;
    max-width: 480px !important;
    min-width: 480px !important;
}
.leaflet-control-geocoder .leaflet-control-geocoder-form {
    flex: 1;
    min-width: 0;
}

/* Ensure input accounts for the clear button while spanning full width */
.leaflet-control-geocoder input[type="search"] {
    width: calc(100% - 36px) !important;
}

.leaflet-control-geocoder input[type="search"] {
    font-size: 1rem;
    padding: 10px 10px 10px 14px;
    border-radius: 8px;
    border: none;
    background: #f7f7f9;
    color: #222;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
}
.leaflet-control-geocoder input[type="search"]:focus {
    background: #fff;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
}
.leaflet-control-geocoder .leaflet-control-geocoder-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-right: 0.5rem;
}

.geocoder-clear-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2em;
    color: #bbb;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    line-height: 1;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.geocoder-clear-btn:hover {
    background: #f0f0f0;
    color: #222;
}
.leaflet-control-geocoder .leaflet-control-geocoder-alternatives {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
    margin-top: 6px;
    border: none;
    overflow: hidden;
}
.leaflet-control-geocoder .leaflet-control-geocoder-alternatives li {
    padding: 10px 16px;
    font-size: 1rem;
    color: #222;
    border-bottom: 1px solid #f2f2f2;
    background: none;
    transition: background 0.15s;
}
.leaflet-control-geocoder .leaflet-control-geocoder-alternatives li:last-child {
    border-bottom: none;
}
.leaflet-control-geocoder .leaflet-control-geocoder-alternatives li:hover,
.leaflet-control-geocoder-selected {
    background: #f7f7f9;
}
@media (max-width: 600px) {
    /* Make top-left controls a flex row so locate and geocoder sit inline */
    .leaflet-top.leaflet-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 98vw !important;
        left: 1vw !important;
        right: 1vw !important;
    }

    /* Geocoder fills remaining width */
    .leaflet-top.leaflet-left .leaflet-control-geocoder {
        min-width: 0;
        flex: 1 1 auto;
        max-width: none;
        width: auto;
        left: auto !important;
        right: auto !important;
        border-radius: 10px;
        padding: 0.5rem 0.5rem;
        display: flex;
        align-items: center;
    }

    /* Force override the fixed desktop widths on small screens */
    .leaflet-control-geocoder.leaflet-bar.leaflet-control-geocoder-expanded.leaflet-control {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .leaflet-control-geocoder .leaflet-control-geocoder-form {
        flex: 1;
        min-width: 0;
    }
    .leaflet-control-geocoder input[type="search"] {
        font-size: 1.05em;
        padding: 12px 40px 12px 14px;
    }
    .leaflet-control-geocoder .leaflet-control-geocoder-alternatives li {
        font-size: 1.05em;
        padding: 12px 14px;
    }
    
    /* Locate control stays fixed size on the left */
    .leaflet-top.leaflet-left .leaflet-control-locate {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        flex: 0 0 auto;
    }

    .leaflet-top.leaflet-left .leaflet-control-locate a {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Additional breakpoint for very small screens */
@media (max-width: 480px) {
    .leaflet-top.leaflet-left {
        gap: 6px !important;
        left: 2vw !important;
        right: 2vw !important;
        width: 96vw !important;
    }
    .leaflet-top.leaflet-left .leaflet-control-locate a {
        width: 40px !important;
        height: 40px !important;
    }
}
