:root {
--fvl-sd-primary: #1b4d3e; --fvl-sd-accent: #007bff;
--fvl-sd-text: #2c3e50;
--fvl-sd-muted: #666;
--fvl-sd-border: #eaeaea;
--fvl-sd-bg: #ffffff;
--fvl-sd-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.fvl-sd-container {
font-family: 'Inter', -apple-system, sans-serif;
max-width: 1200px;
margin: 2rem auto;
color: var(--fvl-sd-text);
} .fvl-sd-title {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
font-weight: 700;
} .fvl-sd-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 1.5rem;
}
.fvl-sd-filter-btn {
background: transparent;
border: 1.5px solid #dcdcdc;
padding: 10px 24px;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
font-size: 1.1rem;
text-transform: uppercase;
transition: all 0.3s ease;
color: var(--fvl-sd-text);
}
.fvl-sd-filter-btn:hover {
background: #f8f9fa;
border-color: var(--fvl-sd-primary);
}
.fvl-sd-filter-btn.active {
background: var(--fvl-sd-primary);
color: white;
border-color: var(--fvl-sd-primary);
} .fvl-sd-controls {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.fvl-sd-search-wrap {
width: 100%;
max-width: 400px;
position: relative;
}
.fvl-sd-search {
width: 100%;
padding: 12px 20px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1.1rem;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
} .fvl-sd-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 2rem;
}
.fvl-sd-page-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
background: white;
border-radius: 50%;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.fvl-sd-page-btn.active {
background: #27ae60; color: white;
border-color: #27ae60;
}
.fvl-sd-page-btn:disabled {
opacity: 0.3;
cursor: default;
} .fvl-sd-grid {
display: grid;
grid-template-columns: repeat(var(--fvl-sd-cols, 4), 1fr);
gap: 30px;
} .fvl-sd-card {
background: white;
border: 1px solid var(--fvl-sd-border);
border-radius: 12px;
padding: 25px 15px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.fvl-sd-card:hover {
transform: translateY(-5px);
box-shadow: var(--fvl-sd-card-shadow);
} .fvl-sd-photo-wrap {
position: relative;
width: 130px;
height: 130px;
margin-bottom: 20px;
}
.fvl-sd-photo {
width: 100%;
height: 100% !important;
border-radius: 50%;
object-fit: cover;
border: 3px solid #f0f0f0;
padding: 3px;
background: white;
}
.fvl-sd-flag {
position: absolute;
bottom: 5px;
right: 5px;
width: 30px;
height: 30px !important;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
object-fit: cover;
} .fvl-sd-name {
margin: 0 0 15px 0;
font-size: inherit;
font-weight: 700;
line-height: 1.3;
color: #333;
min-height: 2.6em;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.fvl-sd-divider {
width: 100%;
height: 1px;
background: #f0f0f0;
margin: 10px 0;
}
.fvl-sd-type {
font-size: 0.9rem;
color: var(--fvl-sd-muted);
font-weight: 500;
margin-bottom: 5px;
}
.fvl-sd-location {
font-size: 0.85rem;
color: var(--fvl-sd-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
} .fvl-sd-featured {
border: 2px solid #d4a017;
background: linear-gradient(180deg, rgba(255,251,240,1) 0%, rgba(255,255,255,1) 40%);
box-shadow: 0 4px 12px rgba(212, 160, 23, 0.15);
}
.fvl-sd-featured .fvl-sd-photo {
border-color: #d4a017;
} @keyframes fvlFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fvl-sd-animate {
animation: fvlFadeIn 0.4s ease forwards;
} .fvl-sd-loader-wrap {
grid-column: 1 / -1;
display: flex;
justify-content: center;
align-items: center;
padding: 50px 0;
}
.fvl-sd-loader {
width: 48px;
height: 48px;
border: 5px solid #f3f3f3;
border-top: 5px solid var(--fvl-sd-primary);
border-radius: 50%;
animation: fvlSpin 1s linear infinite;
}
@keyframes fvlSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} @media (max-width: 768px) {
.fvl-sd-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
}
}