body { margin: 0; font-family: Arial, sans-serif; background: #1a1a1a; color: #f0f0f0; } /* TOP MENU */ .top-menu { background: #2a2a2a; padding: 10px 20px; display: flex; gap: 15px; } .top-menu a { color: #f0f0f0; text-decoration: none; font-weight: bold; padding: 6px 12px; border-radius: 6px; } .top-menu a:hover { background: gold; color: black; } /* LAYOUT */ .search-page { display: flex; gap: 30px; padding: 20px 40px; } /* FILTERS */ .filters { width: 260px; background: #2e2e2e; padding: 20px; border-radius: 12px; } .filters label { display: block; margin-top: 15px; font-size: 14px; } .filters input, .filters select { width: 100%; margin-top: 5px; padding: 10px; background: #1a1a1a; border: none; color: white; border-radius: 6px; } /* ===== SELECT2 MATCH FULL INPUT LOOK ===== */ /* lukket felt (det du ser når dropdown er lukket) */ .select2-container--default .select2-selection--multiple { background: #1a1a1a !important; /* samme som inputs */ border: none; border-radius: 6px; min-height: 42px; padding: 6px 10px; } /* tekst/valg */ .select2-container--default .select2-selection__rendered { display: flex; flex-wrap: wrap; gap: 5px; color: white; } /* tags */ .select2-selection__choice { background: gold !important; color: black !important; border: none !important; border-radius: 6px !important; padding: 2px 6px !important; font-size: 12px; } /* dropdown (SAMME FARVE SOM FELTER) */ .select2-dropdown { background: #1a1a1a !important; /* vigtigt: matcher inputs */ color: #fff; border: none; } /* options */ .select2-results__option { background: #1a1a1a; color: #fff; } /* hover */ .select2-results__option--highlighted { background: gold !important; color: black !important; } /* checkbox look */ .select2-results__option::before { content: ''; width: 14px; height: 14px; margin-right: 8px; border: 1px solid #999; background: #fff; display: inline-block; } .select2-results__option[aria-selected="true"]::before { background-color: #0078d7; border-color: #0078d7; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14'%3E%3Cpath d='M4 7l2 2 4-4' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* RESULTS */ .results { flex: 1; } .results-header { display: flex; justify-content: space-between; margin-bottom: 20px; } /* GRID */ .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; } /* CARD */ .profile-card { display: block; background: #2e2e2e; border-radius: 12px; overflow: hidden; transition: 0.3s; position: relative; text-decoration: none; color: inherit; } .profile-card:hover { transform: translateY(-5px); background: #3a3a3a; } .fav-btn { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); border: none; color: white; font-size: 18px; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; } .fav-btn.active { color: red; } .profile-card img { width: 100%; height: 180px; object-fit: cover; } .profile-info { padding: 10px; } .profile-info p { color: #ccc; font-size: 14px; } .profile-info button { margin-top: 10px; width: 100%; padding: 8px; border: none; background: gold; font-weight: bold; border-radius: 6px; } /* PAGINATION */ .pagination { text-align: center; margin-top: 30px; } .pagination button { margin: 5px; padding: 10px 15px; border: none; background: #2e2e2e; color: white; border-radius: 6px; cursor: pointer; } .pagination button.active { background: gold; color: black; } /* RESPONSIVE */ @media(max-width:1300px){.grid{grid-template-columns:repeat(5,1fr);}} @media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:400px){.grid{grid-template-columns:1fr;}} @media(max-width:900px){ .search-page{flex-direction:column;} .filters{width:100%;} }

.age-range {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;
}

.age-range input[type="range"] {
    width: 90%;
}

.age-values {
    font-size: 14px;
    color: #ccc;
}



/*.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.carousel-img {
    width: 100%;
    flex: 0 0 100%;
    scroll-snap-align: start;
}*/




.image-carousel-wrapper {
    position: relative;
    overflow: hidden;
}

/*.image-carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
}*/

.image-carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
 
	 object-fit: fill;  
}

.image-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.profile-image {
    width: 100%;
    flex: 0 0 100%;
    object-fit: cover;
  
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2000;
    background: rgba(0,0,0,0.2);
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
}

.scroll-btn.left { left: 5px; }
.scroll-btn.right { right: 5px; }


footer {
    margin-top: 60px;
    padding: 30px;
    text-align: center;
    background: #2a2a2a;
    color: #ccc;
}