/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */



/*GROB*/
path.frame{
	stroke: #9f9f9f;
}

path.grave{
	fill: #efefef;
    stroke: #818181;
    stroke-width: 3px;
}

text.grave-label{
	fill: #818181;
}

path.grave:hover{
	fill: #aae45d !important;
	stroke: #aae45d !important;
}

.grave-label {
    pointer-events: none;
    user-select: none;
}

.grave {
    cursor: pointer;
}

.grave-hover {
    stroke: #fff !important;
	fill: #fff !important;
}



/*POPUP*/

.grave-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.grave-popup.show {
    display: flex;
}

.grave-popup-content {
    position: relative;
    background: #61ce70;
    width: 90%;
    max-width: 700px;
    border-radius: 3px;
    padding: 35px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
	color: #fff;
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    border: 0;
    background: #fff;
    font-size: 34px;
    cursor: pointer;
    line-height: 1;
    padding: 0px 7px 5px 7px;
    border-radius: 99px;
    color: #585E61;
}

[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
    background-color: #51f037 !important;
}

table td, table th{
	padding: 5px !important;
	text-align: left !important;
	font-size: 17px !important;
}

.popup-section-title,
.popup-title{
	font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}



/*SEARCH*/

.groblje-search-wrap {
    width: 100%;
    background: #eeeeee;
    padding: 7px;
	font-family: 'Roboto Condensed';
}

.groblje-search-input {
    border: none !important;
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 7px;
}

.groblje-results {
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
}

.grob-row {
    display: grid;
    grid-template-columns: 40px 40px 40px 1fr 1fr;
    gap: 15px;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.grob-row:hover {
   background: #86cb7b;
    color: #fff;
}

.grob-header {
    font-weight: 600;
    border-bottom: 3px solid #eee;
}

.grave-sidebar-hover {
    fill: #aae45d !important;
    stroke: #aae45d !important;
}

.grave-path-hover {
    fill: #aae45d !important;
    stroke: #aae45d !important;
}

.grave-label-hover {
    fill: #fff !important;
}

/*MAP*/

#map-wrapper {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: hidden;
}



#map-panzoom {
    width: 100%;
    height: 100%;
    cursor: grab;
}

#map-panzoom svg {
    width: 100%;
    height: calc(100vh - 150px);
}


#map-wrapper {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

#map-panzoom {
    width: 100%;
    height: 100%;
}

#map-panzoom svg {
    width: 100%;
    height: 100%;
    display: block;
}

.map-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-controls button {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 99px;
    background: #86cb7b;
    color: #ffffff;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    transition: all .2s ease;
    padding: 0px;
	font-weight: 400;
}

.map-controls button:hover {
    transform: scale(1.05);
}

.map-controls button:active {
    transform: scale(0.95);
}

#search-close{
    display:none;
}

.search-toggle{
    position: absolute;
    right: 10px;
    top: 28px;
    transform: translateY(-50%);

    border: 0;
    background: transparent;


    height: 32px;

    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #818181;
	padding: 0px 15px;
}
.search-toggle:hover{
	background: transparent !important;
}
	


/*TABLET - MOBILE*/
@media(max-width:1024px){
	#map-wrapper{
       height: 100% !important;
	}
	
	.groblje-search-input-wrap{
    position: relative;
}

.groblje-search-input{
    padding-right: 50px !important;
}




.search-toggle:hover{
    background: transparent !important;
	color: #5a5e61;
}

/* otvoreni search */
.search-open .search-toggle{
    font-size: 24px;
}
}

/* MOBILE SEARCH */


@media (max-width: 1024px) {

    .groblje-search-wrap {
        position: relative;
        z-index: 1000;
    }

    /* početno sakriveni rezultati */
    .groblje-results {
        display: none;
    }

    /* otvoreno stanje */
    .groblje-search-wrap.search-open {


        display: flex;
        flex-direction: column;
    }

    .groblje-search-wrap.search-open .groblje-search-input {
        margin-bottom: 10px;
  
    }

    .groblje-search-wrap.search-open .groblje-results {

        display: block;

        flex: 1;
        overflow-y: auto;

        border-radius: 8px;
        border: 1px solid #e5e5e5;
		font-size: 12px !important;
    }

    /* opcionalno sakrij header tablice na mobitelu */
    .grob-header {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
    }
	
	.popup-section-title, .popup-title{
		font-size: 18px !important;
	}
	
	#popup-content td, 
	#popup-content  th{
		font-size: 14px !important;
	}
	
	.popup-close{
		padding: 0px 7px !important;
	}
}