/*
 * Fil: style.css
 * Version: 3.3
 * Beskrivning: Styling för SilverWeb Googlekarta plugin.
 * Innehåller stilar för anpassad kartnål och professionellt informationsfönster.
 */

/* ==========================================================================
   1. Anpassad kartnål (Logotyp)
   ========================================================================== */

/* Huvudbehållare för logotypen som visas på kartan */
.custom-map-pin {
    background: white;
    padding: 5px;
    border-radius: 50%; /* Gör behållaren helt rund */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Mjuk skugga för djup */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    position: relative;
    /* Centrerar nålen horisontellt och placerar den ovanför sin geografiska punkt */
    transform: translate(-50%, -100%);
    border: 2px solid white; /* Ger en liten vit kant runt loggan */
}

/* Skapar den lilla pilen under logotyp-bubblan med CSS */
.custom-map-pin::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    /* Detta skapar en triangel med hjälp av borders */
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid white;
    margin-top: -4px; /* Litet överlapp för att undvika en ful glipa */
}

/* Själva logotyp-bilden inuti bubblan */
.custom-map-pin img {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Gör även bilden rund */
    object-fit: contain; /* Säkerställer att bilden skalas korrekt utan att sträckas ut */
}


/* ==========================================================================
   2. Professionellt Informationsfönster (Popup)
   ========================================================================== */

/* Huvudbehållare för popupen */
.professional-info-window {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 18px 22px;
    max-width: 280px;
    position: relative;
}

/* Brödtexten som hämtas från WordPress-editorn */
.professional-info-window .info-window-body {
    line-height: 1.6;
    font-size: 15px;
    color: #333;
}

/* Stycken (p-taggar) i innehållet */
.professional-info-window .info-window-body p {
    margin: 0 0 1em 0;
}
.professional-info-window .info-window-body p:last-child {
    margin-bottom: 0;
}

/* Rubriker (h1, h2, h3) i innehållet */
.professional-info-window .info-window-body h1,
.professional-info-window .info-window-body h2,
.professional-info-window .info-window-body h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 600;
}

/* Behållaren för knappar och länkar längst ner */
.professional-info-window .info-window-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9e9e9; /* Tunn avdelare */
}

/* Generell styling för knappen */
.professional-info-window .info-window-button {
    display: inline-block;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: filter 0.2s ease-in-out, transform 0.1s ease;
    border: none;
}

/* Hover-effekt som gör knappen 10% mörkare, oavsett vald färg */
.professional-info-window .info-window-button:hover {
    color: #fff;
    transform: translateY(-1px); /* Liten lyft-effekt */
    filter: brightness(90%);
}

/* Den nya, anpassade stängningsknappen (X) */
.info-window-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background-color: #f1f1f1;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: Arial, sans-serif;
}

/* Hover-effekt för stängningsknappen */
.info-window-close:hover {
    background-color: #e5e5e5;
    transform: rotate(90deg); /* Liten rolig animation */
}


/* ==========================================================================
   3. Åsidosätt Google Maps Standard-CSS
   ========================================================================== */

/* Animering för när fönstret tonar in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Huvudbehållaren för Googles fönster */
.gm-style .gm-style-iw-c {
    padding: 0 !important;
    background-color: #fff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px !important;
    animation: fadeIn 0.3s ease-out; /* Applicerar vår fade-in animation */
}

/* Innehålls-diven inuti Googles fönster */
.gm-style .gm-style-iw-d {
    overflow: hidden !important; /* Tar bort eventuella scrollbars */
}

/* Döljer Googles standard stängningsknapp (X) */
.gm-style .gm-ui-hover-effect {
    display: none !important;
}