.search-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2.2em 2.2em;
    background: #eaf6ff;
    padding: 2.5em 2.7em;
    border-radius: 1.3em;
    box-shadow: 0 2px 12px rgba(100, 140, 160, 0.08);
    max-width: 1150px;
    margin: 2.5em auto 2.7em auto;
    align-items: center;
}
.search-form label {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: 1.15em;
    margin-bottom: 0.2em;
}
.search-form select,
.search-form input[type="text"] {
    width: 100%;
    min-width: 210px;
    max-width: 340px;
    padding: 0.6em 1em;
    margin-top: 0.7em;
    border-radius: 0.7em;
    border: 1.5px solid #b7d2e8;
    font-size: 1.08em;
    text-align: center;
}
.search-form button {
    grid-column: 1 / span 3;
    justify-self: center;
    margin-top: 1em;
    background: #ffd966;
    color: #444;
    font-weight: bold;
    padding: 0.7em 3.5em;
    font-size: 1.17em;
    border-radius: 1em;
    border: none;
    cursor: pointer;
    transition: background 0.22s;
    box-shadow: 0 2px 8px rgba(220,180,80,0.11);
}
.search-form button:hover {
    background: #ffecb3;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
    margin: 2.2rem 0 1.5rem 0;
    font-size: 1.04rem;
}
.page-link, .next-page {
    display: inline-block;
    padding: 0.33em 1em;
    background: #fff;
    color: #444;
    border: 1px solid #eee;
    border-radius: 1.4em;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
    margin: 0 0.1em;
}
.page-link.active, .page-link:hover, .next-page:hover {
    background: #ffd966;
    color: #222;
    border-color: #ffd966;
}
.dots {
    padding: 0 0.4em;
    color: #888;
}

.search-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1.7em 2.2em;
    background: #eaf6ff;
    padding: 2.7em 2.2em 2.2em 2.2em;
    border-radius: 1.3em;
    box-shadow: 0 2px 12px rgba(100, 140, 160, 0.08);
    max-width: 1200px;
    margin: 2.5em auto 2.7em auto;
    align-items: end;
}
.search-form label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: bold;
    font-size: 1.13em;
    margin-bottom: 0.1em;
    gap: 0.4em;
    letter-spacing: 0.03em;
}
.search-form select,
.search-form input[type="text"],
.search-form input[type="number"] {
    width: 100%;
    min-width: 115px;
    max-width: 250px;
    padding: 0.52em 0.9em;
    margin-top: 0.19em;
    border-radius: 0.7em;
    border: 1.4px solid #b7d2e8;
    font-size: 1.05em;
    text-align: center;
    background: #fff;
    box-shadow: 0 1.5px 6px #d8f0ff22;
    transition: border 0.18s;
}
.search-form input[type="number"] {
    text-align: right;
}
.search-form .input-range-group {
    display: flex;
    align-items: center;
    gap: 0.3em;
    width: 100%;
}
.search-form .input-range-group input {
    flex: 1 1 35%;
    min-width: 0;
}
.search-form .input-range-group span {
    font-weight: normal;
    margin: 0 0.3em;
    color: #888;
}

.search-form button {
    grid-column: 1 / span 4;
    justify-self: center;
    margin-top: 1.3em;
    background: #ffd966;
    color: #444;
    font-weight: bold;
    padding: 0.73em 4em;
    font-size: 1.19em;
    border-radius: 1.1em;
    border: none;
    cursor: pointer;
    transition: background 0.22s;
    box-shadow: 0 2px 8px rgba(220,180,80,0.12);
}
.search-form button:hover {
    background: #ffecb3;
}

@media (max-width: 900px) {
    .search-form {
        grid-template-columns: 1fr 1fr;
        padding: 1.1em 0.4em;
    }
    .search-form button {
        grid-column: 1 / span 2;
    }
}
@media (max-width: 600px) {
    .search-form {
        grid-template-columns: 1fr;
        padding: 0.8em 0.2em;
        max-width: 99vw;
    }
    .search-form label {
        align-items: flex-start;
        font-size: 1em;
    }
    .search-form button {
        grid-column: 1;
        width: 100%;
        padding: 1.1em 0;
        font-size: 1.08em;
    }
    .search-form select,
    .search-form input[type="text"],
    .search-form input[type="number"] {
        min-width: 0;
        max-width: 99vw;
        width: 100%;
    }
}

.notfound-msg {
    text-align: center;
    margin: 60px 0 60px 0;
    font-size: 1.2rem;
    color: #888;
    background: #f7fafc;
    padding: 32px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.notfound-msg .icon {
    font-size: 2.4rem;
    margin-bottom: 8px;
    color: #ffd700;
}

@media (max-width: 700px) {
    .search-form {
        grid-template-columns: 1fr;
        padding: 1.2em 0.3em;
        max-width: 99vw;
    }
    .search-form label {
        align-items: center;
        font-size: 1em;
    }
    .search-form select,
    .search-form input[type="text"] {
        min-width: 0;
        max-width: 99vw;
        width: 100%;
        font-size: 1em;
    }
    .search-form button {
        grid-column: auto;
        width: 100%;
        padding: 0.95em 0;
        font-size: 1.1em;
    }
    
}