.ff-clubs-map-page {
width: 100%;
direction: rtl;
color: #091639;
}
.ff-map-filters {
max-width: 950px;
margin: 0 auto 46px;
}
.ff-map-filters-grid {
display: grid;
grid-template-columns: 260px repeat(4, 96px);
gap: 12px;
align-items: center;
justify-content: center;
}
.ff-map-filter-field > svg {
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
}
.ff-map-filter-field {
position: relative;
display: block;
margin: 0;
}
.ff-map-filter-field > span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ff-map-filter-field input,
.ff-map-filter-field select {
width: 100%;
height: 38px;
border: 1px solid #d4d8e2;
border-radius: 7px;
padding: 0 13px;
background-color: #fff;
color: #091639;
font-size: 14px;
font-weight: 400;
line-height: 38px;
outline: none;
box-shadow: none;
}
.ff-map-filter-field input::placeholder {
color: #737b8d;
}
.ff-map-filter-field select {
appearance: auto;
cursor: pointer;
}
.ff-map-submit,
.ff-map-reset {
display: none;
}
.ff-map-status {
max-width: 1740px;
min-height: 24px;
margin: -24px auto 18px;
padding-inline: 12px;
color: #091639;
font-size: 20px;
font-weight: bold;
text-align: right;
}
.ff-map-layout {
display: grid;
grid-template-columns: minmax(0, 48%) minmax(0, 52%);
gap: 56px;
align-items: start;
margin: 0 auto;
padding-inline: 50px;
}
.ff-map-results {
min-width: 0;
}
.ff-map-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
row-gap: 42px;
}
.ff-map-card {
display: block;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.ff-map-card-image {
display: block;
width: 100%;
height: 168px;
margin: 0 0 18px;
border-radius: 14px;
background: #eef1f7;
overflow: hidden;
}
.ff-map-card-image img,
.ff-map-card-image span {
width: 100%;
height: 100%;
display: block;
}
.ff-map-card-image img {
object-fit: cover;
}
.ff-map-card-image span {
background:
var(--ff-card-fallback-image, none) center / cover no-repeat,
linear-gradient(135deg, #e9edf5, #f8f9fc);
}
.ff-map-card-content {
padding: 0;
text-align: right;
}
.ff-map-card-type {
display: block;
margin: 0 0 4px;
padding: 0;
border-radius: 0;
background: transparent;
color: #091639;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
}
.ff-map-card-title {
margin: 0 0 3px;
color: #091639 !important;
font-size: 18px !important;
font-weight: bold !important;
line-height: 1.35;
}
.ff-map-card-title a {
color: inherit;
text-decoration: none;
}
.ff-map-card-address {
margin: 0 0 12px;
color: #091639;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
}
.ff-map-card-about {
display: none;
}
.ff-map-card-routes {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
}
.ff-map-card-routes span,
.ff-club-subscription-links a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
border-radius: 5px;
padding: 5px 11px;
background: #091639;
color: #fff;
font-size: 13px;
font-weight: 500;
line-height: 1;
text-decoration: none;
}
.ff-map-card-button {
display: none;
}
.ff-map-wrapper {
position: sticky;
top: 92px;
min-width: 0;
}
.ff-map-canvas {
width: 100%;
height: 666px;
border-radius: 18px;
overflow: hidden;
background: #eef1f7;
box-shadow: none;
}
.ff-clubs-map-page .leaflet-control-zoom {
display: none;
}
.ff-clubs-map-page .leaflet-tile {
filter: saturate(.62) contrast(.9) brightness(1.06);
}
.ff-clubs-map-page .leaflet-control-attribution {
opacity: .45;
font-size: 10px;
}
.ff-map-marker {
width: 26px !important;
height: 34px !important;
margin: 0 !important;
background: transparent;
}
.ff-map-marker span {
position: relative;
display: block;
width: 22px;
height: 22px;
margin: 0 auto;
border: 5px solid #091639;
border-radius: 50% 50% 50% 0;
background: #fff;
transform: rotate(-45deg);
box-shadow: 0 6px 14px rgba(9, 22, 57, .18);
}
.ff-map-marker span::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
background: #091639;
}
.ff-clubs-map-page .leaflet-popup-content-wrapper {
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.ff-clubs-map-page .leaflet-popup-content {
width: 285px !important;
margin: 0;
direction: rtl;
}
.ff-clubs-map-page .leaflet-popup-tip {
background: #fff;
box-shadow: 0 8px 24px rgba(9, 22, 57, .12);
}
.ff-clubs-map-page .leaflet-popup-close-button {
top: 8px;
left: 8px;
right: auto;
z-index: 5;
width: 26px;
height: 26px;
color: #091639;
font-size: 22px;
line-height: 24px;
text-align: center;
}
.ff-map-popup-card {
overflow: hidden;
border-radius: 12px;
background: #fff;
box-shadow: 0 14px 38px rgba(9, 22, 57, .18);
text-align: right;
}
.ff-map-popup-image {
display: block;
width: 100%;
height: 92px;
overflow: hidden;
background: #eef1f7;
}
.ff-map-popup-image img,
.ff-map-popup-image span {
display: block;
width: 100%;
height: 100%;
}
.ff-map-popup-image img {
object-fit: cover;
}
.ff-map-popup-image span {
background:
var(--ff-card-fallback-image, none) center / cover no-repeat,
linear-gradient(135deg, #e9edf5, #f8f9fc);
}
.ff-map-popup-body {
padding: 13px 16px 16px;
}
.ff-map-popup-type {
margin-bottom: 3px;
color: #46526a;
font-size: 12px;
font-weight: 400;
line-height: 1.35;
}
.ff-map-popup-card h3 {
margin: 0 0 4px;
color: #091639;
font-size: 15px;
font-weight: 800;
line-height: 1.3;
}
.ff-map-popup-card h3 a {
color: inherit;
text-decoration: none;
}
.ff-map-popup-address {
margin-bottom: 10px;
color: #46526a;
font-size: 12px;
font-weight: 400;
line-height: 1.35;
}
.ff-map-popup-routes {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ff-map-popup-routes span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
border-radius: 5px;
padding: 4px 9px;
background: #091639;
color: #fff;
font-size: 11px;
font-weight: 500;
line-height: 1;
}
.ff-map-pages {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 44px;
}
.ff-map-pages button {
min-width: 40px;
min-height: 38px;
border: 0;
border-radius: 7px;
padding: 8px 13px;
background: #eef1f7;
color: #091639;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.ff-map-pages button.is-active {
background: #091639;
color: #fff;
}
.ff-map-pages span {
display: inline-flex;
align-items: center;
padding: 0 4px;
}
.ff-map-no-results {
grid-column: 1 / -1;
border-radius: 18px;
padding: 30px;
background: #f7f8fb;
color: #091639;
text-align: center;
font-weight: bold;
}
.ff-clubs-map-page.is-loading {
opacity: .65;
pointer-events: none;
}
.ff-club-subscription-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 1400px) {
.ff-map-layout {
gap: 36px;
padding-inline: 32px;
}
.ff-map-list {
column-gap: 24px;
row-gap: 36px;
}
.ff-map-card-image {
height: 120px;
}
}
@media (max-width: 1100px) {
.ff-map-filters {
max-width: 720px;
margin-bottom: 30px;
}
.ff-map-filters-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ff-map-layout {
grid-template-columns: 1fr;
padding-inline: 24px;
}
.ff-map-wrapper {
position: static;
order: -1;
}
.ff-map-canvas {
height: 460px;
}
.ff-map-status {
max-width: none;
margin-top: 0;
padding-inline: 24px;
}
}
@media (max-width: 720px) {
.ff-map-filters {
max-width: none;
padding-inline: 20px;
}
.ff-map-filters-grid {
grid-template-columns: 1fr;
}
.ff-map-layout {
gap: 28px;
padding-inline: 20px;
}
.ff-map-list {
grid-template-columns: 1fr;
row-gap: 32px;
}
.ff-map-card-image {
height: 210px;
}
}
.ff-single-club-sidebar-box {
width: 100%;
color: #091639;
text-align: right;
}
.ff-single-sidebar-section {
margin-bottom: 26px;
}
.ff-single-sidebar-section h3 {
margin: 0 0 12px;
color: #091639;
font-size: 18px;
font-weight: 800;
line-height: 1.3;
}
.ff-single-sidebar-route-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ff-single-sidebar-route-list a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
border-radius: 5px;
padding: 5px 12px;
background: #091639;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
.ff-single-sidebar-route-list a:hover {
color: #fff;
}
.ff-single-sidebar-map {
width: 100%;
height: 235px;
border-radius: 13px;
overflow: hidden;
background: #eef1f7;
}
.ff-single-sidebar-map .leaflet-tile {
filter: saturate(.62) contrast(.9) brightness(1.06);
}
.ff-single-sidebar-marker {
width: 26px !important;
height: 34px !important;
margin: 0 !important;
background: transparent;
}
.ff-single-sidebar-marker span {
position: relative;
display: block;
width: 22px;
height: 22px;
margin: 0 auto;
border: 5px solid #d80b43;
border-radius: 50% 50% 50% 0;
background: #fff;
transform: rotate(-45deg);
box-shadow: 0 6px 14px rgba(9, 22, 57, .18);
}
.ff-single-sidebar-marker span::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
background: #d80b43;
}
.ff-single-sidebar-map .leaflet-popup-content-wrapper {
padding: 0;
border-radius: 4px;
background: #fff;
box-shadow: 0 10px 28px rgba(9, 22, 57, .14);
}
.ff-single-sidebar-map .leaflet-popup-content {
width: 210px !important;
margin: 0;
direction: rtl;
}
.ff-single-sidebar-map .leaflet-popup-close-button {
display: none;
}
.ff-single-sidebar-popup {
display: grid;
gap: 4px;
padding: 13px 16px;
text-align: center;
}
.ff-single-sidebar-popup strong {
color: #091639;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
.ff-single-sidebar-popup a {
color: #2484c6;
font-size: 13px;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.ff-single-sidebar-map .leaflet-popup-content-wrapper {
padding: 0;
border-radius: 8px;
background: #fff;
box-shadow: 0 10px 28px rgba(9, 22, 57, .14);
}
.ff-single-sidebar-map .leaflet-popup-content {
width: 180px !important;
margin: 0;
direction: rtl;
}
.ff-single-sidebar-map .leaflet-popup-tip {
background: #fff;
box-shadow: 0 8px 24px rgba(9, 22, 57, .12);
}
.ff-single-sidebar-map .leaflet-popup-close-button {
display: none;
}
.ff-single-sidebar-mini-popup {
padding: 11px 13px;
text-align: center;
}
.ff-single-sidebar-mini-popup strong {
display: block;
color: #091639;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}
.ff-single-sidebar-map .leaflet-popup {
margin-bottom: 8px;
}
.ff-venue-hero-image img {
width: 100%;
height: 255px;
display: block;
object-fit: cover;
object-position: center;
border-radius: 14px;
}
.ff-venue-single h1,
.ff-venue-title {
margin: 0 0 6px;
color: #091639;
font-size: 34px;
font-weight: 800;
line-height: 1.18;
letter-spacing: .02em;
}
.ff-venue-subtitle {
margin: 0 0 26px;
color: #46526a;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
}
.ff-venue-section-title,
.ff-venue-single h2 {
margin: 0 0 12px;
color: #091639;
font-size: 16px;
font-weight: 800;
line-height: 1.35;
}
.ff-venue-single p,
.ff-venue-body-text {
margin: 0 0 13px;
color: #26324a;
font-size: 14px;
font-weight: 400;
line-height: 1.8;
}
.ff-venue-sidebar-title,
.ff-single-sidebar-section h3 {
margin: 0 0 10px;
color: #091639;
font-size: 18px;
font-weight: bold;
line-height: 1.35;
}
.ff-venue-sidebar-text {
color: #26324a;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
}
.ff-single-sidebar-route-list a {
min-height: 25px;
border-radius: 4px;
padding: 5px 10px;
background: #091639;
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 1;
}
.ff-single-sidebar-map {
height: 205px;
border-radius: 11px;
}
@media (max-width: 1024px) {
.ff-venue-hero-image img {
height: 230px;
}
.ff-venue-single h1,
.ff-venue-title {
font-size: 30px;
}
}
@media (max-width: 767px) {
.ff-venue-hero-image img {
height: 210px;
border-radius: 12px;
}
.ff-venue-single h1,
.ff-venue-title {
font-size: 26px;
}
.ff-venue-single p,
.ff-venue-body-text {
font-size: 14px;
line-height: 1.7;
}
}