/**
 * Interactive Job Map Styles
 * 
 * Enterprise-grade CSS architecture for advanced mapping visualization.
 * Implements modern design patterns with optimal performance and accessibility.
 * 
 * @package Interactive_Map_Jobs
 * @version 1.0.0
 * @author Webstudio.ltd
 */

/* ====================================================================== */
/* CORE MAP CONTAINER                                                    */
/* ====================================================================== */
#interactive-map {
    height: 800px; /* Default height, overridable via inline styles */
    width: 100%;
    background-color: #f0f0f0; /* Fallback for loading states */
    position: relative; /* Required for absolute positioning */
    overflow: hidden; /* Prevent content overflow */
}

/* ---------------------------------------------------------------------- */
/* 2. Štýly pre ikony pracovných ponúk                                   */
/* ---------------------------------------------------------------------- */
.job-marker-icon {
    background-color: transparent !important;
    border: none !important;
}

/* Štýly pre job4gastro ikonu */
.job-marker-icon img {
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    transition: transform 0.2s ease;
}

.job-marker-icon:hover img {
    transform: scale(1.1);
}

/* Fallback štýly */
.job-marker-fallback {
    background-color: transparent !important;
    border: none !important;
}

.job-marker-fallback div {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
}

/* ---------------------------------------------------------------------- */
/* 3. Štýly pre clustre Leaflet.markercluster                             */
/* ---------------------------------------------------------------------- */

/* Základný štýl pre SVG kontajner clusteru */
.marker-cluster-svg {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: visible !important;
    z-index: 1000;
}

/* Potrebujeme zabezpečiť, aby pôvodné štýly MarkerCluster.Default.css neprepisovali naše SVG */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large,
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div,
.marker-cluster div {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Zabezpečenie, aby SVG element vnutri divIconu bol vždy 100% veľkosti */
.marker-cluster-svg svg {
    display: block;
}

/* ---------------------------------------------------------------------- */
/* 4. Štýly pre filtračný panel na mape - UPRAVENÉ PRE SPODNÉ CENTROVANIE */
/* ---------------------------------------------------------------------- */
.map-filter-panel {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Jemný tieň */
    display: flex; /* Používame flexbox pre horizontálne usporiadanie */
    flex-wrap: wrap; /* Povoliť zalomenie riadkov na menších obrazovkách */
    align-items: center; /* Vertikálne zarovnanie prvkov v strede */
    justify-content: center; /* Horizontálne zarovnanie v strede */
    max-width: 90%; /* Obmedzenie šírky, aby nebol príliš široký */
    /* Vlastné pozicionovanie pomocou CSS, keďže Leaflet nemá bottomcenter */
    position: relative; /* Dôležité pre absolútne pozicovanie filtračného panelu */
    bottom: 20px; /* Posunie panel trochu vyššie od spodného okraja mapy */
    left: 50%; /* Začne na 50% šírky */
    transform: translateX(-50%); /* Posunie sa späť o polovicu vlastnej šírky na vycentrovanie */
    z-index: 1000;
    backdrop-filter: blur(10px);

    /* Na desktope filter-toggle-button skryjeme */
    .filter-toggle-button {
        display: none;
    }
}

/* Filter panel content - na desktope je vždy viditeľný */
.map-filter-panel .filter-panel-content {
    display: flex; /* Predvolene je flex pre desktop */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    width: 100%; /* Zabezpečí, že zaberie celú šírku rodiča flex */
}


/* Úpravy pre jednotlivé skupiny filtrov */
.map-filter-panel .filter-group {
    display: block; /* Dôležité pre zobrazenie labelu na samostatnom riadku */
    align-items: flex-start; /* Zabezpečí zarovnanie obsahu skupiny na začiatok */
    gap: 8px; /* Medzera medzi labelom a inputom/selectom */
    flex-basis: auto; /* Umožní flexboxu zmenšiť šírku skupiny */
}

.map-filter-panel label {
    font-weight: bold;
    color: #000000;
    white-space: nowrap; /* Zabezpečí, že label sa nezalomí */
    display: block; /* Uisti sa, že label je blokový element */
    font-size: 0.9em; /* Zmenši veľkosť písma pre label */
}

.icon-inline{
    display: flex;
    font-size: 18px;
}

/* Kontajner pre input/select s ikonou */
.map-filter-panel .input-field {
    display: flex;
    align-items: center; /* Centrovanie ikony a textu vertikálne */
    margin-top: 8px;
    flex-grow: 1; /* Umožní kontajneru rásť */
    min-width: 180px; /* Zabezpečí, že sa nezmenší príliš */
    transition: border-color 0.2s ease;
}

.map-filter-panel .input-number {
    display: flex;
    align-items: center; /* Centrovanie ikony a textu vertikálne */
    margin-top: 8px;
    flex-grow: 1; /* Umožní kontajneru rásť */
    transition: border-color 0.2s ease;
}

.map-filter-panel .input-field:focus-within { /* Zmena border farby pri fokuse na input/select vnútri */
    border-color: #0B4EA2;
}

/* Štýl pre ikony vo vstupných poliach */
.map-filter-panel .input-icon {
    margin-right: 8px; /* Medzera medzi ikonou a textom */
    fill: black; /* Farba ikony */
    flex-shrink: 0; /* Zabezpečí, že sa ikona nezmenší */
}

.border-right{
    border-right: 1px solid #dedede;
}

.cell-group{
    padding: 20px 15px 20px 25px;
}

/* Štýl pre select a input elementy vnútri .input-with-icon */
.map-filter-panel .input-field select,
.map-filter-panel .input-number input[type="number"] {
    border: none; /* Odstránime všetky okraje, lebo ich už má .input-with-icon */
    padding: 0; /* Odstránime padding, aby text priliehal k ikone */
    background-color: transparent; /* Priehľadné pozadie */
    font-size: 13px;
    color: #706c6c;
    outline: none; /* Odstránime focus outline, ktorý by inak bol na select/input */
    flex-grow: 1; /* Umožní vyplniť zostávajúci priestor */
}

/* Špecifický štýl pre skupinu súm */
.map-filter-panel .amount-filters {
    display: block; /* Aby sa label 'Suma:' zobrazil na vlastnom riadku nad inputmi */
    gap: 5px; /* Menšia medzera medzi inputmi a oddeľovačom */
}

/* Nový kontajner pre min a max inputy, aby zostali vedľa seba */
.map-filter-panel .amount-inputs-wrapper {
    display: flex; /* Zabezpečí, že min a max inputy sú vedľa seba */
    align-items: center; /* Vertikálne zarovnanie */
    gap: 5px; /* Medzera medzi inputmi a oddeľovačom */
    margin-top: 5px; /* Malá medzera medzi labelom a inputmi */
}

.map-filter-panel .amount-filters input {
    width: 65px; /* Pevná šírka pre min/max sumu, alebo flexibilná podľa potreby */
    text-align: center;
}

/* Štýl pre tlačidlo Filtrovať */
/* Štýl pre tlačidlá (Filtrovať a Resetovať) */
.map-filter-panel .button-group {
    display: flex;
    gap: 10px; /* Medzera medzi tlačidlami */
    align-items: center; /* Vertikálne zarovnanie ikon a textu */
}

.map-filter-panel button {
    display: inline-flex; /* Umožní zarovnanie ikony a textu vedľa seba */
    align-items: center; /* Vertikálne zarovnanie obsahu tlačidla */
    justify-content: center; /* Horizontálne zarovnanie obsahu tlačidla */
    padding: 10px 15px; /* Menší padding pre ikonu */
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.map-filter-panel button .button-icon {
    margin-right: 5px; /* Medzera medzi ikonou a textom */
    fill: currentColor; /* Ikona prevezme farbu textu tlačidla */
}

/* Špecifické štýly pre tlačidlo Filtrovať */
.map-filter-panel #apply-filters {
    background-color: #073670; /* Tvoja červená farba */
    color: white;
}

.map-filter-panel #apply-filters:hover {
    background-color: #04254e;
    color: white;
}

.map-filter-panel #apply-filters:active {
    transform: translateY(0);
}

/* Špecifické štýly pre tlačidlo Resetovať */
.map-filter-panel #reset-filters {
    background-color: rgb(238 28 42 / 10%);
    color: #ee1c2a;
}

.map-filter-panel #reset-filters:hover {
    background-color: #ee1c2a; /* Tmavšia sivá pri hoveri */
    color: white;
}

.map-filter-panel #reset-filters:active {
    transform: translateY(0);
}

/* Štýl pre počítadlo pracovných ponúk */
.job-count-display {
    font-size: 14px;
    color: #666;
    margin-left: 15px; /* Oddelenie od tlačidla */
    white-space: nowrap;
    background-color: rgb(0 199 5 / 10%);
    color: #00a905;
    padding: 5px 15px;
    border-radius: 5px;
    margin-right: 25px;
}


/* Úprava pre Leaflet kontrolu, aby sa panel vycentroval na spodku */
/* Toto je dôležité, lebo Leaflet nemá priamo 'bottomcenter' */
.leaflet-bottom.leaflet-left {
    display: flex;
    width: 100%; /* Rozširiť, aby sa mohlo centrovať */
    /* Dôležité: povoliť klikanie cez tento obal na mapu */
    pointer-events: none;
    /* Pridáme padding na spodok, aby sa tlačidlo neodrezalo pri spodnom okraji mapy */
    padding-bottom: 20px; /* Uprav podľa potreby, aby bolo nad tlačidlom zoom */
}

.leaflet-bottom.leaflet-left .map-filter-panel {
    /* Znova povoliť klikanie na samotný panel */
    pointer-events: auto;
}

.leaflet-popup-content{
    width: 300px!important;
    margin: 0px;
}

.leaflet-popup-content-wrapper{
    padding: 0px 0px 1px 0px;
    border-radius: 20px;
    box-shadow: 0 3px 50px rgba(0,0,0,0.15) !important;
}

.leaflet-container a.leaflet-popup-close-button{
    top: 10px;
    right: 10px;
    color: #fff;
    background: rgb(255 255 255 / 20%);
    border-radius: 50px;
    padding: 2px;
}

/* Štýly pre popup pracovných ponúk */
.job-popup {
    padding: 0;
    margin: 0;
}

.job-title {
    font-size: 18px;
    margin: 0 0 15px 0 !important;
    color: #000000;
    font-weight: 700 !important;
    line-height: 1.2;
    padding: 20px 20px 0 20px;
}

.job-tags {
    display: flex;
    gap: 10px;
    margin: 0 0 15px 0;
    padding: 0 20px;
}

.job-location-tag {
    background-color: #0B4EA2;
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.job-type-tag {
    background-color: #ff6b35;
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.job-details {
    padding: 0 20px 20px 20px;
}

.job-description {
    font-size: 13px;
    color: #333;
    margin: 0 0 0px 0 !important;
    line-height: 1.4;
}

.job-actions {
    text-align: center;
    border-top: 1px solid #eaeaea;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-radius: 0 0 20px 20px;
}

.job-link-button {
    display: block;
    background-color: #56b311;
    color: white !important;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.2s ease;
    text-align: center;
}

.job-link-button:hover {
    background-color: #4a9e0e;
    color: white !important;
    text-decoration: none;
}

/* Responzívne úpravy pre menšie obrazovky */
@media (max-width: 768px) {
    #interactive-map {
        height: 600px!important; /* Nastav menšiu výšku pre telefóny */
    }
    
    .leaflet-popup-content{
        width: 280px!important;
    }
    
    .map-filter-panel {
        flex-direction: column; /* Na menších obrazovkách prvky pod sebou */
        align-items: stretch; /* Roztiahnuť prvky na celú šírku */
        padding: 10px 15px;
        gap: 10px;
        height: auto;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        /* Nové: Tlačidlo bude absolútne pozicionované pre lepšie ovládanie vzhľadu
           a nebude súčasťou pôvodného flow flexboxu map-filter-panel */
        position: static; /* Reset pre mobilné zobrazenie, aby sa správal ako blokový element v parent flexboxe .leaflet-bottom.leaflet-left */
        transform: none; /* Reset pre mobilné zobrazenie */
        width: 100%; /* Zabezpečí, že zaberie celú šírku */
        background-color: transparent; /* Panel je transparentný, aby bolo vidno tlačidlo pod ním */
        box-shadow: none; /* Odstráni tieň na mobile, aby nerušil okolie tlačidla */
        backdrop-filter: none; /* Odstráni blur na mobile */
    }

    /* Vylepšené štýly pre mobilné prepínacie tlačidlo */
    .map-filter-panel .filter-toggle-button {
        display: flex; /* Zobraziť tlačidlo */
        position: absolute; /* Tlačidlo sa umiestni nezávisle od obsahu filtra */
        bottom: 10px; /* Odsadenie od spodku mapy (alebo okna) */
        left: 80%;
        transform: translateX(-50%); /* Vycentrovanie */
        z-index: 1001; /* Zabezpečí, že je nad inými elementami */
        background-color: #073670; /* Nová modrá farba */
        color: white;
        padding: 10px 0px; /* Väčší padding */
        border-radius: 5px; /* Zaoblené rohy pre pilulkový vzhľad */
        font-weight: bold;
        font-size: 16px; /* Väčšie písmo */
        text-align: center;
        gap: 8px;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        min-width: 140px; /* Minimálna šírka tlačidla */
        max-width: 80%; /* Maximálna šírka na mobiloch */
    }

    .map-filter-panel .filter-toggle-button:hover {
        background-color: #083c7a; /* Tmavší odtieň modrej pri hoveri */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
    }

    .map-filter-panel .filter-toggle-button.active {
        background-color: #073670; /* Ešte tmavší odtieň, keď je panel otvorený */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* Predvolene skryť filter-panel-content na mobiloch */
    .map-filter-panel .filter-panel-content {
        max-height: 0; /* Skryť obsah */
        display: block; /* Zmena na block pre vertikálne usporiadanie */
        opacity: 0;
        pointer-events: none; /* Zabraňuje interakcii, keď je skrytý */
        padding-top: 0;
        padding-bottom: 0;
        /* Nové: Panel obsahu bude mať vlastné pozadie a tieňovanie */
        background-color: rgba(255, 255, 255, 0.85);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 8px;
        /* Position pre filter-panel-content */
        position: absolute;
        bottom: 30px; /* Nad tlačidlom Filtrovať */
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 50px); /* Šírka s medzerou od okrajov */
        max-width: 320px; /* Max šírka pre väčšie mobily */
        z-index: 999; /* Pod tlačidlom Filtrovať */
        padding: 0; /* Vyprázdníme padding, bude nastavený pri .open */
    }

    /* Zobraziť filter-panel-content, keď má triedu 'open' */
    .map-filter-panel .filter-panel-content.open {
        max-height: 500px; /* Dostatočná výška pre zobrazenie obsahu (podľa potreby upraviť) */
        opacity: 1;
        pointer-events: auto; /* Povoliť interakciu */
        padding: 20px; /* Pridajte padding, keď je otvorený */
    }

    .map-filter-panel .filter-group {
        flex-direction: column; /* Zabezpečiť, aby label a input boli pod sebou na mobiloch */
        align-items: flex-start;
        gap: 5px;
        width: 100%;
        border-right: none; /* Odstrániť pravý okraj na mobiloch */
        padding: 20px 0!important; /* Zjednodušený padding na mobiloch */
    }

    .map-filter-panel .cell-group {
        padding: 15px 0px 10px 0px!important
    }

    .map-filter-panel .button-group {
        flex-direction: row; /* Tlačidlá pod sebou na mobiloch */
        width: 100%;
        padding: 10px 0px 15px 0px!important;
        border-top: 1px solid #eee; /* Jemná čiara nad tlačidlami */
    }

    .map-filter-panel button {
        width: 100%; /* Tlačidlá na celú šírku */
    }

    .map-filter-panel .job-count-display {
        margin-left: 0;
        text-align: center;
        width: 100%;
        margin-right: 0;
        margin-top: 10px; /* Pridajte medzeru */
    }

    /* Špecifické úpravy pre sumu na mobiloch */
    .map-filter-panel .amount-filters {
        display: block; /* Zabezpečí, že 'Suma:' bude nad inputmi */
    }

    .map-filter-panel .amount-inputs-wrapper {
        flex-direction: row; /* Min a max sú vedľa seba */
        justify-content: space-between;
        width: 100%;
        margin-top: 5px;
    }

    .map-filter-panel .input-number {
        width: calc(50% - 10px); /* Približne polovica šírky mínus medzera */
        margin-top: 0; /* Odstráni dodatočnú medzeru */
    }

    .map-filter-panel .amount-separator {
        display: flex; /* Zobraziť pomlčku pri mobilnom zobrazení */
        align-self: center;
        margin: 0 5px;
    }

    /* Zabezpečenie, že inputy sú flexibilné, ale majú min šírku */
    .map-filter-panel .input-field select,
    .map-filter-panel .input-number input[type="number"] {
        width: 100%; /* Roztiahne sa na celú šírku rodiča */
    }

    /* Zruší desktopové border-right */
    .map-filter-panel .border-right {
        border-right: none;
    }

    /* Zrušíme padding-bottom na .leaflet-bottom.leaflet-left,
       pretože tlačidlo má teraz vlastné pozicionovanie */
    .leaflet-bottom.leaflet-left {
        padding-bottom: 0;
    }
}

/* Pôvodný štýl, ktorý si mal na konci, je tu ponechaný */
div.leaflet-marker-icon.marker-cluster.marker-cluster-small.leaflet-zoom-animated.leaflet-interactive{
    background-color: transparent !important;
}

/* Skryť spiderfy čiary ale zachovať rozloženie markerov */
.leaflet-marker-spiderfy-line {
    display: none !important;
}

/* Štýly pre spiderfy markery - zachovať ich */
.leaflet-marker-spiderfy {
    z-index: 1000;
}

/* Zvýšiť vzdialenosť medzi spiderfy markermi */
.leaflet-marker-spiderfy .leaflet-marker-icon {
    margin: 8px !important;
}

.leaflet-touch .leaflet-control-attribution{
    display: none!important;
}

select{
    background-size: .65em!important;
}

.hidden-width-calculator {
    visibility: hidden;
    position: absolute;
    white-space: nowrap;
    /* Dôležité: Zabezpeč, aby mal rovnaké štýly písma ako tvoj input,
       aby meranie bolo presné. Skopíruj relevantné štýly z .map-filter-panel .input-number input[type="number"] */
    font-family: inherit; /* Alebo konkrétny font ako 'Roboto', sans-serif */
    font-size: inherit;    /* Alebo konkrétna veľkosť písma ako 14px */
    padding: inherit;      /* Aby padding inputu ovplyvnil aj šírku merača */
    border: 0;             /* Aby border inputu neovplyvnil šírku merača */
}

/* ====================================================================== */
/* GEOGRAPHIC RESTRICTIONS                                               */
/* ====================================================================== */
/* Visual enhancement for restricted geographic area (SK, CZ, AT, DE, CH, NL) */
.leaflet-container {
    background-color: #f8f9fa; /* Light background for restricted areas */
}

/* Enhanced focus on the 6-country region */
.leaflet-tile-pane {
    filter: contrast(1.1) brightness(1.05); /* Slightly enhanced visibility for target region */
}

/* Country border styling - Precise GeoJSON borders */
.leaflet-interactive path {
    stroke: #56b320 !important;
    stroke-width: 2px !important;
    stroke-opacity: 0.8 !important;
    stroke-dasharray: 1, 4 !important;
}

/* Tooltip styling for country names */
.country-tooltip {
    background: #3d8a2f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 6px 10px;
    font-size: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.country-tooltip:before {
    display: none; /* Hide default pointer */
}

/* Disable focus ring/highlight on touch/click for SVG borders */
.leaflet-interactive:focus,
.leaflet-interactive:active,
.leaflet-interactive:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Prevent iOS tap highlight */
#interactive-map {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ====================================================================== */
/* RESPONSIVE DESIGN                                                     */
/* ====================================================================== */
@media (max-width: 768px) {
    .job-popup {
        max-width: 280px;
    }
    
    .job-title {
        font-size: 14px; /* Reduced by 2px from 16px */
    }
    
    .job-description {
        font-size: 10px; /* Reduced by 2px from 12px */
    }
    
    .job-link-button {
        font-size: 11px; /* Reduced by 2px from 13px */
        padding: 10px 16px;
    }
    
    .job-location-tag,
    .job-type-tag {
        font-size: 10px; /* Reduced by 2px from 12px */
    }
}