/* ================================================================
FRAGMENT 5 Z 7
NAZWA W CODE SNIPPETS: CSS – Filtr schronisk
Dotyczy: przycisków wyboru regionu na komputerze i telefonie
================================================================ */
/* Główny kontener filtra */
.filtr-schronisk {
width: 100%;
margin: 10px 0 32px;
}
/* Nagłówek „Wybierz region” */
.filtr-schronisk__tytul {
display: block;
margin-bottom: 12px;
color: #171717;
font-size: 14px;
font-weight: 800;
line-height: 1.3;
letter-spacing: 0.5px;
}
/* Kontener przycisków */
.filtr-schronisk__przyciski {
display: flex;
flex-wrap: wrap;
gap: 10px;
width: 100%;
}
/* Wygląd pojedynczego przycisku */
.filtr-schronisk__przycisk {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 11px 20px;
box-sizing: border-box;
border: 1px solid #dcdcdc;
border-radius: 6px;
background-color: #ffffff;
color: #171717 !important;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
/* Przycisk po najechaniu */
.filtr-schronisk__przycisk:hover {
border-color: #159b68;
background-color: #f1faf6;
color: #117c54 !important;
text-decoration: none !important;
transform: translateY(-1px);
}
/* Aktualnie wybrany region */
.filtr-schronisk__przycisk.aktywny {
border-color: #159b68;
background-color: #159b68;
color: #ffffff !important;
box-shadow: 0 5px 16px rgba(21, 155, 104, 0.22);
}
/* Aktywny przycisk po najechaniu */
.filtr-schronisk__przycisk.aktywny:hover {
border-color: #117c54;
background-color: #117c54;
color: #ffffff !important;
}
/* Widok mobilny – dwa rzędy po dwa przyciski */
@media screen and (max-width: 767px) {
.filtr-schronisk {
margin: 8px 0 24px;
}
.filtr-schronisk__tytul {
margin-bottom: 10px;
font-size: 13px;
}
.filtr-schronisk__przyciski {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px;
width: 100%;
}
.filtr-schronisk__przycisk {
width: 100%;
min-width: 0;
min-height: 48px;
padding: 9px 5px;
font-size: 11px;
line-height: 1.25;
text-align: center;
transform: none;
}
.filtr-schronisk__przycisk:hover {
transform: none;
}
}