/* Base container styling */
.map-tools {
    padding: 4rem 0;
}

/* Control wrapper - centers the form fields */
.map-tools-controll {
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
}

/* Select styling - matches the blue arrow from infrest.de */
.map-tools select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230063a6' d='M7 8L0 0h14L7 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 1.5rem;
    border: 1px solid #c3c8ce;
    border-radius: .4rem;
    color: #0063a6;
    font-size: 1.5rem;
    height: 4.4rem;
    padding: 0 4rem 0 1.5rem;
    width: 100%;
    cursor: pointer;
    transition: border-color .2s ease-in-out;
}

.map-tools select:focus {
    border-color: #0063a6;
    outline: none;
}

/* Search input styling */
.map-tools input[type="text"] {
    background-color: #fff;
    border: 1px solid #c3c8ce;
    border-right: 0;
    border-radius: .4rem 0 0 .4rem;
    color: #333;
    display: block;
    font-size: 1.5rem;
    height: 4.4rem;
    padding: 0 1.5rem;
    width: 100%;
    outline: none;
    transition: border-color .2s ease-in-out;
}

.map-tools input[type="text"]:focus {
    border-color: #0063a6;
}

/* Search button styling */
.map-tools #button-search {
    background-color: #0063a6;
    border: 1px solid #0063a6;
    border-radius: 0 .4rem .4rem 0;
    color: #fff;
    cursor: pointer;
    height: 4.4rem;
    padding: 0;
    transition: background-color .2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4.4rem;
}

.map-tools #button-search:hover {
    background-color: #004a7c;
}

/* Fallback for the magnifying glass icon if SVG use fails */
.map-tools #button-search svg {
    width: 2.2rem;
    height: 2.2rem;
    fill: #fff;
    flex-shrink: 0;
}

/* Map container styling */
.map-tools__map {
    border-radius: .4rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Tab animations */
.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Table styling for availability check */
.js-result-container table {
    width: 100%;
    border-collapse: collapse;
}

.js-result-container th {
    background-color: #f8f9fa;
    color: #56606b;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.2rem;
    padding: 1.2rem;
    border-bottom: 2px solid #dee2e6;
}

.js-result-container td {
    padding: 1.2rem;
    border-bottom: 1px solid #dee2e6;
    color: #333;
    font-size: 1.4rem;
}