/* font */

@font-face {
    font-family: 'N27';
    src: url('../fonts/n27-regular-webfont.woff2') format('woff2'),
        url('../fonts/n27-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'N27';
    src: url('../fonts/n27-regular-webfont.woff2') format('woff2'),
        url('../fonts/n27-regular-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

/* regular - italic */
@font-face {
    font-family: 'N27';
    src: url('../fonts/n27-regularitalic-webfont.woff2') format('woff2'),
        url('../fonts/n27-n27-regularitalic-webfont-webfont.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

/* bold */
@font-face {
    font-family: 'N27';
    src: url('../fonts/n27-bold-webfont.woff2') format('woff2'),
        url('../fonts/n27-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

body {
    margin: 0;
    background: #fff;
    font-family: 'N27';
}


:root {
    --primary: #122A3C;
    --green: #3EB8B1;
    --red: #E94667;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: none;
}

.search-bar {
    display: flex;
    justify-content: center;
    gap: 16px;
    /* width: max-content; */
    margin: 0 auto;
    margin-bottom: 40px;
    font-family: 'N27';
}

.search-bar input, .search-bar select, .search-bar button {
    height: 50px;
    border: none;
    font-size: 18px;
}

.search-bar .main{
    /* border: 1px solid #e0dcdc; */
    /* border-radius: 22px; */
    position: relative;
    display: flex;
}

.search-bar .filters-btn{
    border: 1px solid var(--primary);
    padding: 0 40px;
    font-weight: 700;
    color: var(--primary);
    transition: .3s;
}

.search-bar .filters-btn:hover{
    opacity: 0.7;
}

.search-bar .geo-btn{
    position: absolute;
    left: 10px;
}

.search-bar .geo-btn img{
    width: 17px;
}

.search-bar .city-input{
    border-right: 1px solid #e0dcdc;
    padding: 0 30px;
    padding-left: 50px;
    border: 1px solid #e0dcdc;
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
}
/*
.search-bar .city-input::placeholder{
    color: var(--primary);
}*/

.search-bar .activity-input{
    padding: 0 30px;
    border-top: 1px solid #e0dcdc;
    border-bottom: 1px solid #e0dcdc;
}

/*.search-bar .activity-input::placeholder{
    color: var(--primary);
}*/

.search-bar .search-btn{
    background-color: var(--green);
    color: #ffffff;
    font-weight: 700;
    padding: 0 30px;
    border: none;
    text-transform: uppercase;
    font-family: 'N27';
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    margin-right: 10px;
}

.main-content {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 100px;
}

#results-container {
    flex: 0 0 500px;
    max-width: 500px;
    background: #F9FAFA;
    border-radius: 18px;
    box-shadow: 0 6px 24px 0 #dde0ee40;
    padding: 16px;
    max-height: 70vh;
    overflow-y: auto;
}

.result-card {
    padding: 10px;
    display: flex;
    gap: 20px;
    border: 1px solid #F3EDED;
    background-color: #ffffff;
    margin: 10px;
}

.result-card:last-child {
    border-bottom: none;
}

.result-card:hover{
    cursor: pointer;
    opacity: 0.8;
}

.result-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.result-card .address,
.result-card .activities {
    font-size: 14px;
    margin-bottom: 10px;
}

.result-card .city {
    font-size: 0.96rem;
    color: #6b7280;
}

.result-card .navigate-btn {
    color: var(--green);
    display: flex;
    font-size: 14px;
    align-items: center;
    width: max-content;
}

.result-card .navigate-btn img{
    width: 20px;
    margin-right: 5px;
}

#map {
    flex: 1 1 0;
    height: 70vh;
    min-width: 400px;
    border-radius: 18px;
    box-shadow: 0 6px 24px 0 #dde0ee40;
}



.result-card .result-media{
    flex: 0 0 30%;
    position: relative;
    height: 100px;
}

.result-card .result-media img{
    width: 100%;
    object-position: center;
    border-radius: 10px;
    height: 100px;
}

.result-card .result-media img.premium-img{
    width: 30px;
    height: 30px;
}

.result-card .result-body{
    flex: 0 0 70%;
}

.result-card .result-media .distance{
    font-size: 12px;
    position: absolute;
    top: 6px;
    background: var(--primary);
    z-index: 1;
    color: #ffffff;
    padding: 7px 10px;
    border-radius: 7px;
    left: 5px;
}

.result-card .result-media .distance img{
    width: 10px;
    margin-right: 5px;
    height: auto;
}

.categories-line{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0;
    font-size: 12px;
    margin-top: 12px;
    color: #a59c9c;
    width: 82%;
}
.categories-line .cat{
    white-space:nowrap;
}
.categories-line .dot{
    color:#999;
    margin:0 8px
}
.categories-line .more-link{
    white-space:nowrap;
    color: var(--primary);
    font-weight:600;
    cursor:default
}

.result-actions .cta-btn{
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.result-actions .cta-btn img{
    width: 20px;
}


.locations-page{
    padding: 70px 0;
}

.locations-page h1{
    text-align: center;
    font-size: 55px;
    font-weight: 700;
    margin-bottom: 60px;
}

.geo-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:8px;
    cursor:pointer;
    border: none;
    background: none;
}
/*.geo-btn.active{
    outline:2px solid #3b82f6
}*/
.filters-btn{
    border:2px solid #22b8b5;
    background:#fff;
    color:#22b8b5;
    border-radius:999px;
    padding:8px 16px;
    cursor:pointer
}
.results-caption{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px
}
.inline-sort{
    font:inherit;
    padding:8px 10px;
    border:1px solid #e3e3e7;
    border-radius:10px;
    background:#fff
}
.categories-line .dot{
    color:#999;
    margin:0 8px
}
.more-link{
    white-space:nowrap;
    color:#2a5bd7;
    font-weight:600
}

/* modal */
.filters-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:9999;
    display:none
}
.flt-wrap{
    position:relative;
    background:#fff;
    max-width:880px;
    margin:6vh auto;
    border-radius:16px;
    padding:16px 20px
}
.flt-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px
}
.flt-title{
    font-weight:700;
    font-size:18px
}
.flt-close{
    border:none;
    background:transparent;
    font-size:18px;
    cursor:pointer
}
.flt-section{
    padding:8px 0
}
.flt-section-title{
    font-weight:600;
    margin:8px 0 6px
}
.flt-item{
    display:flex;
    align-items:center;
    gap:8px;
    margin:6px 0
}
.flt-item.all{
    margin:10px 0
}
.flt-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 24px;
    max-height:50vh;
    overflow:auto;
    padding-right:10px
}
.flt-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px
}
.flt-clear{
    background:transparent;
    border:none;
    /* color:#2a5bd7; */
    text-decoration: underline;
    cursor:pointer
}
.flt-apply{
    background:#22b8b5;
    color:#fff;
    border:none;
    border-radius:999px;
    padding:10px 18px;
    cursor:pointer;
    height: 40px;
    font-weight: 700;
    font-size: 16px;
    padding: 0 30px;
    border-radius: 22px;
}


.flt-apply:hover{
    opacity: 0.8;
}



/* InfoWindow skin */
.gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.pp-iw {
    padding: 16px 18px 12px 18px;
    min-width: 280px;
    max-width: 360px;
    font-family: inherit;
}
.pp-iw-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
}
.pp-iw-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}
.pp-iw-discount {
    border:0;
    background:#e9f3ff;
    color:#2a5bd7;
    font-weight:700;
    width:32px;
    height:32px;
    border-radius:50%;
    cursor:pointer;
}
.pp-iw-sub {
    color:#6b7280;
    margin-bottom:10px;
}
.pp-iw-actions {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:12px;
}
.pp-iw a.iw-nav {
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#10b981;
    font-weight:600;
}
.pp-iw a.iw-nav img {
    width:18px;
    height:18px;
}
.pp-iw-footer {
    display:flex;
    justify-content:flex-end;
}
.pp-iw a.iw-more {
    color: var(--primary);
    font-weight:600;
    text-decoration:none;
}

/* list highlight */
.result-card {
    border:1px solid transparent;
    border-radius:16px;
    transition: box-shadow .2s, border-color .2s;
    position: relative;
}
.result-card.active {
    border-color: #12b981;/* box-shadow:0 0 0 3px rgba(42,91,215,.15); */
}

/* results container should be scrollable if you want inner scroll */
#results-container {
    overflow: auto;
}


.gm-style-iw-chr{
    position: absolute;
    right: 5px;
}


.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
    max-height: 200px;
    overflow: scroll;
}


/* Custom checkbox */
.custom-checkbox {
    display:block;
    position:relative;
    padding-left:32px;
    margin-bottom:10px;
    cursor:pointer;
    font-size:15px;
    line-height:22px;
    user-select:none;
    color:#333;
}
.custom-checkbox input {
    position:absolute;
    opacity:0;
    cursor:pointer;
    height:0;
    width:0;
}
.custom-checkbox .checkmark {
    position:absolute;
    top:0;
    left:0;
    height:20px;
    width:20px;
    /* background:#f0f0f0; */
    border: 1px solid #bbb;
    border-radius:4px;
    transition:all .2s;
}
.custom-checkbox:hover input ~ .checkmark {
    background:#e6e6e6;
    border-color:#999;
}
.custom-checkbox input:checked ~ .checkmark {
    background:#122a3c;
    border-color:#122a3c;
}
.custom-checkbox .checkmark:after {
    content:"";
    position:absolute;
    display:none;
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}
.custom-checkbox input:checked ~ .checkmark:after {
    display:block;
}

/* Premium switch */
.flt-switch{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-left:12px;
    vertical-align:middle;
}
.flt-switch .switch {
    position:relative;
    display:inline-block;
    width:42px;
    height:24px;
    margin-right: 10px;
}
.flt-switch .switch input {
    opacity:0;
    width:0;
    height:0;
}
.flt-switch .slider {
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#c7c7c7;
    transition:.2s;
    border-radius:24px;
}
.flt-switch .slider:before {
    position:absolute;
    content:"";
    height:18px;
    width:18px;
    left:3px;
    bottom:3px;
    background:white;
    transition:.2s;
    border-radius:50%;
}
.flt-switch .switch input:checked + .slider {
    background:#122a3c;
}
.flt-switch .switch input:checked + .slider:before {
    transform:translateX(18px);
}
.flt-switch .switch-label {
    font-size:14px;
}

/* Service chips */
.services-line {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}
.chip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    line-height:18px;
    background:#f5f7fa;
    border:1px solid #e2e8f0;
    color:#1f2937;
}
.chip .icon {
    font-size:12px;
    line-height:1;
}
.chip.premium {
    background:#fff7e6;
    border-color:#f6ad55;
    color:#8a5a00;
}
.chip.more {
    background:#eef2f7;
    border-color:#d7dde7;
    color:#334155;
}
.chip.small {
    padding:1px 6px;
    font-size:11px;
}

/* Badge v kotu slike */
.result-media {
    position:relative;
}
.badge-premium {
    position:absolute;
    bottom: 8px;
    left:8px;
}


.btn-reset-filters{
    border: none;
    background-color: #ffffff;
    padding: 10px 20px;
    border-radius: 20px;
    margin-top: 10px;
}

.btn-reset-filters:hover{
    cursor: pointer;
    opacity: 0.7;
}

.premium-reset-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;        /* razmak med premium in reset */
  margin-left: 10px;
}

.flt-reset {
  border: none;
  background: transparent;
  padding: 6px;
  line-height: 0;
  cursor: pointer;
  opacity: .9;
  transition: transform .12s ease, opacity .12s ease;
  position: absolute;
  right: -50px;
}
.flt-reset:hover { opacity: 1; transform: scale(1.05); }
.flt-reset img {width: 22px;height: 22px;display: block;border: 1px solid #e0dcdc;padding: 5px;border-radius: 5px;}


@media screen and (max-width: 768px){


    .locations-page h1{
        font-size: 37px;
        margin: 0 15px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .search-bar{
        gap: 0;
    }

    .search-bar .main{
        margin: 10px;
        display: block;
        border: none;
        border-radius: 0px;
    }

    .search-bar .city-input{
        width: 100%;
        display: inline-block;
        border: 1px solid #e0dcdc;
        font-size: 16px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0px;
    }

    .search-bar .activity-input{
        width: 100%;
        display: inline-block;
        border: 1px solid #e0dcdc;
        font-size: 16px;
        border-top: none;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        padding-left: 50px;
    }

    .search-bar .search-btn{
        width: 87%;
        margin-top: 10px;
        border-radius: 20px;
        margin-right: 0;
    }

    .search-bar .filters-btn{
        width: max-content;
        margin: 0 auto;
        width: 45%;
        display: inline-block;
        font-size: 0;
        width: auto;
        padding: 0 10px;
        border-radius: 5px;
        border: 1px solid #e0dcdc;
        margin-left: 5px;
        margin-top: 11px;
        vertical-align: top;
    }

    .search-bar .filters-btn:before{
        content: '';
        display: block;
        background-image: url('../images/icons/setting.svg');
        height: 20px;
        width: 20px;
        background-size: cover;
    }

    .flt-switch{
        margin-top: 0;
        margin-left: 0px;
        gap: 0;
        margin-top: 10px;
    }

    #map{
        flex: none;
        height: auto;
        min-height: 400px;
        width: 100%;
        border: none;
        border-radius: 0;
    }

    .inline-sort{
        color: var(--primary);
    }

    .result-card{
        margin: 0;
        margin-bottom: 10px;
    }
    
    .result-card h4{
        font-size: 14px;
    }
    
    .result-card .address, .result-card .activities{
        font-size: 12px;
    }
    
    .result-card .navigate-btn{
        font-size: 12px;
    }
    
    #results-container{
        min-height: auto;
    }
    
    .flt-reset{
        right: 0;
        position: relative;
        margin-top: 5px;
        vertical-align: middle;
    }
}