/** NOTICE OF LICENSE
 *
 * This module was created by veebipoed.ee and is protected by the laws of Copyright.
 * This use license is granted for only one website.
 * To use this module on several websites, you must purchase as many licenses as websites on which you want to use it.
 * Use, copy, modification or distribution of this module without written license agreement from veebipoed.ee is strictly forbidden.
 * In order to obtain a license, please contact us: info@veebipoed.ee
 * Any infringement of these provisions as well as general copyrights will be prosecuted.
 * ...........................................................................
 *
 * vp_countrymap - A Prestashop Module
 *
 * @author     Veebipoed.ee
 * @copyright  Copyright (c) 2023 veebipoed.ee (http://www.veebipoed.ee)
 * @license    Commercial license
 * @version    1.0.0
 * Support by mail: info@veebipoed.ee
 */

/* Theme gives #wrapper 1.563rem top padding, which left a gap above the map block. Home page only. */
body#index #wrapper {
    padding-top: 0;
}

/* The left column sat inside the wrapper padding removed above; give it that back, plus the map's top padding. */
body#index #left-column {
    padding-top: 3.063rem; /* 1.563rem original + 1.5rem, same drop as the map */
}

#country-map-container {
    position: relative;
    isolation: isolate; /* keeps the full-width ::before behind the map but above the page background */
    display: flex;
    justify-content: center;
    padding: 1.5rem 2rem 2rem 2rem;
}

/* Background spans the whole screen while the map stays inside the theme column.
   The world map always fits the block height; on very wide screens the gradient shows at the sides.
   Pale blue gradient with a faint world map and route lines (world-bg.svg, Natural Earth data). */
#country-map-container::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: url('../img/world-bg.svg') center / auto 100% no-repeat, linear-gradient(180deg, #e9f1fa 0%, #f6f9fd 100%);
}

/* 100vw includes the scrollbar width; clip the overflow so no horizontal scrollbar appears. */
body#index {
    overflow-x: clip;
}

#country-map {
    /* Height is width * 162/104 (viewBox), so 414px gives 645px, 50px less than the 446px (695px) that matched the live map height. Shrinks with the block on small screens. */
    width: 100%;
    max-width: 414px;
    height: auto;
}

#country-map .map-item {
    transition: fill 0.3s ease-in;
}

#country-map #norway:hover,
#country-map #norway.highlight {
    cursor: not-allowed;
}

#country-map #finland:hover,
#country-map #finland.highlight {
    fill: url(#flag-finland);
}

#country-map #sweden:hover,
#country-map #sweden.highlight {
    fill: url(#flag-sweden);
}

#country-map #estonia:hover,
#country-map #estonia.highlight {
    fill: url(#flag-estonia);
}

#country-map #latvia:hover,
#country-map #latvia.highlight {
    fill: url(#flag-latvia);
}

#country-map #lithuania:hover,
#country-map #lithuania.highlight {
    fill: url(#flag-lithuania);
}

#country-map #poland:hover,
#country-map #poland.highlight {
    fill: url(#flag-poland);
}

#country-map #germany:hover,
#country-map #germany.highlight {
    fill: url(#flag-germany);
}

#country-map #denmark:hover,
#country-map #denmark.highlight {
    fill: url(#flag-denmark);
}

#country-map #austria:hover,
#country-map #austria.highlight {
    fill: url(#flag-austria);
}

#country-map #belgium:hover,
#country-map #belgium.highlight {
    fill: url(#flag-belgium);
}

#country-map #france:hover,
#country-map #france.highlight {
    fill: url(#flag-france);
}