@import url("https://fonts.googleapis.com/css2?family=Poppins");
@import url("../map/variables.css");

.marker-detail {
    display: block;
    position: absolute;
    width: 458px;
    height: calc(100vh );
    top: calc(var(--navbar-height));
    left: 0;
    background: #ffffff;
    box-shadow: 0 20px 10px -10px rgba(200, 200, 200, 0.2);
    overflow-y: auto;
    padding-bottom: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
    z-index: 1002;

}

/* Diese Klasse wird erst hinzugefügt, wenn alles bereit ist */
.marker-detail.is-visible {
    opacity: 1;
    visibility: visible;
}
@media only screen and (max-width: 458px) {
    .marker-detail {
        width: 100%;
    }
}

.marker-detail .picture {
    background: red;
    position: relative;
    height: 220px;

}

.marker-detail .header {

    position: relative;
    text-align: left;
    background: orange;
}


.marker-detail .content {
    position: relative;
    text-align: left;


}

#marker-detail-close {
    position: fixed;
    top: calc(var(--navbar-height) + 20px);
    left: calc(458px - 4rem);
    z-index: 15;

    /* Size improvements */
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;

    /* Better visual styling */
    border-radius: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#marker-detail-close:hover,
#marker-detail-close:focus,
#marker-detail-close:active,
#marker-detail-close:visited {
    text-decoration: none !important;
    color: inherit !important;
    font-weight: inherit !important;
    outline: none !important;

    /* Custom hover effect instead of default link behavior */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    background-color: rgba(90, 238, 209, 0.95) !important;
}

/* Icon sizing */
#marker-detail-close i {
    font-size: 20px !important;
}

/* For mobile devices */
@media only screen and (max-width: 458px) {
    #marker-detail-close {
        left: calc(100% - 4rem); /* Position at right edge of full-width sidebar */
    }
}

.has-background-primary-75 {
    background-color: #5aeed1 !important;
    border: #222222;
}

.checked {
    color: #ffb70f; /* Bulma's warning yellow color */
}

.unchecked {
    color: grey;
}

.box {
    border: 2px solid rgba(94, 88, 88, 0.1);


}

.level-left {
    flex-direction: row;
}

#upload-button {
    z-index: 5;
}

.cell.box.has-background-primary-75 {
    margin-bottom: 0.5rem !important; /* oder einen anderen gewünschten Wert */
}

/* Responsive Typography für Sidebar */
@media (max-width: 768px) {
    .marker-detail {
        font-size: 16px; /* Basis-Schriftgröße für Mobile */
    }

    .marker-detail h1,
    .marker-detail h2,
    .marker-detail h3 {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    .marker-detail p,
    .marker-detail li {
        font-size: 16px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .marker-detail h1,
    .marker-detail h2,
    .marker-detail h3 {
        font-size: 1.1rem;
    }
}

/* Kommentar-Karten Styling */
.comment-card {
    border-left: 4px solid #5aeed1;
    background: #fafafa;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.comment-card:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.comment-header {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.comment-author {
    color: #363636;
}

.comment-date {
    font-style: italic;
}

.comment-rating {
    display: flex;
    align-items: center;
}

.stars-small .fa-star {
    font-size: 0.875rem;
    margin-right: 2px;
}

.comment-text {
    line-height: 1.6;
    margin-bottom: 0;
}

.comment-text p {
    margin-bottom: 0;
    color: #4a4a4a;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .comment-card {
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .comment-header {
        padding-bottom: 0.25rem;
        margin-bottom: 0.5rem;
    }
}


.swiper-slide img {

    object-fit: cover; /* Behält Aspect Ratio bei, keine Verzerrung */
    object-position: center;
    cursor: pointer; /* Zeigt an, dass Bilder klickbar sind */
    transition: opacity 0.3s ease;

}
/* Die Klasse wird durch das onload-Event oder CSS-Trick gesetzt */

.swiper-slide img:hover {
    opacity: 0.9; /* Hover-Effekt für bessere UX */
}

/* PhotoSwipe Anpassungen für ActivityMap Design */
.pswp__button {
    color: #5aeed1 !important; /* ActivityMap Primärfarbe */
}

.pswp__bg {
    background: rgba(0, 0, 0, 0.9) !important;
}
/* Google-Style Swiper Navigation Buttons - 48px als Standard */
.swiper-button-next,
.swiper-button-prev {
    width: 48px !important;
    height: 48px !important;
    margin-top: -24px !important; /* calc(50% - 24px) für perfekte Zentrierung */
    border-radius: 24px !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Innere Div (wie bei Google) */
.swiper-button-next::before,
.swiper-button-prev::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    background: transparent;
    transition: background-color 0.2s ease;
}

/* Icon-Styling (perfekt zentriert) */
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 28px !important;
    font-weight: normal !important;
    color: #5f6368 !important;

    /* Perfekte Zentrierung */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* Entfernen der line-height Zentrierung */
    line-height: 1 !important;
    margin: 0 !important;
}

/* Hover-Effekte (Google-Style) */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transform: none !important;
}

.swiper-button-next:hover::before,
.swiper-button-prev:hover::before {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Active State */
.swiper-button-next:active,
.swiper-button-prev:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}



/* Disabled State (falls benötigt) */
.swiper-button-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.swiper-button-disabled:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}