/*
Theme Name: Fork PW
Author: Portalworks
Version: 1.0.0
*/
/*****************************************
                FONTS
*****************************************/

/* inter-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  
/* inter-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('assets/fonts/inter-v18-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('assets/fonts/inter-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/inter-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*****************************************
                 ROOT
*****************************************/

:root {
    --primary-font: 'Inter', sans-serif;
    --primary-color: #3CA564;
    --secondary-color: #000000;
    --third-color: #9D9D9D;
    --fourth-color: #5C5C5C;
    --wincasa-background: #64A4C1;
    --vebego-background: #5C2483;
}
  
/*****************************************
            BODY AND HTML
*****************************************/

body{
    font-family: var(--primary-font);
    font-weight: 400;
    position: relative;
    min-height: 100svh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;

    & .overlay-body{
        background: #00000033;
        width: 100%;
        height: 100%;
    }
}

#anliegen-content{
	min-height: 170px !important;
}

body.page-template-page-intranet.modal-open > :not(.modal) {
    -webkit-filter: blur(7px);
    -moz-filter: blur(7px);
    -o-filter: blur(7px);
    -ms-filter: blur(7px);
    filter: blur(7px);
}

.select2-selection{
    height: 100% !important;
}

#wp-admin-bar-edit{
	display: none !important;
}

.select2-selection.select2-selection--single{
    height: 58px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b{
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    width: 24px;
    background-image: url('https://immofonds-triage.ch/wp-content/themes/fork-pw/assets/img/arrow.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

.select2-container--default .select2-selection--single{
    border: 1px solid #9D9D9D66;
}

.select2-selection.select2-selection--single{
    display: flex;
    justify-content: start;
    align-items: center;
}

.select2-selection__arrow{
    height: 100% !important;
}

.select2-search__field{
    border: 1px solid var(--primary-color) !important;
}

.select2-search__field:focus{
    border: 1px solid var(--primary-color) !important;
    outline: none !important;
}


.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: var(--primary-color) !important;
}

.btn, .modal-password-form input[type=submit]{
    width: 140px;
    height: 52px;
    margin-top: 40px;
    background: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);

    &:hover{
        background: transparent;
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    &:focus{
        background: transparent;
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    &.non-visable{
        visibility: hidden;
        opacity: 0;
        display: none !important;
    }

    &.btn-zurich{
        margin-top: 60px;
        background: #3CA56426;
        color: var(--primary-color);

        &:hover{
            background: var(--primary-color);
            color: #fff;
        }

        &:focus{
            background: var(--primary-color);
            color: #fff;
        }
    }
    &.create-qr-btn{
        margin-top: 20px;
        width: 100%;
        height: 52px;
    }
}

.modal-password-form input[type=submit]{
    width: 100%;
    margin-top: 16px;
}

.post-password-form label input{
    width: 100%;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-shadow: none;
    outline: none;
}

#menu-posts, #menu-tools, #menu-comments, #wp-admin-bar-comments, #wp-admin-bar-new-content, #wp-admin-bar-wp-logo{
    display: none !important;
}

.form-control:focus{
    box-shadow: none;
    outline: none;
    border-color: #ced4da;;
}

.white-section{
    min-height: calc(100svh - 140px);
    width: 100%;
    max-width: 1280px;
    background: #fff;
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 4px 22.2px 0px #00000040;
}

ul.lang-switcher-wrap{
    list-style-type: none;
    padding: 15px;

    & li{

        & a{
            color: var(--third-color);
            text-decoration: none;
            transition: 0.3s all;
            font-size: 14px;
            text-transform: uppercase;
        }

        &.current-lang a{
            color: var(--secondary-color);
            font-weight: 700;
        }
    }
}

.question-block{
    padding: 15px;
	
	& .btn{
		margin-top: 20px !important;
	}

    & h1{
        color: var(--secondary-color);
        line-height: 1.21;
        font-size: 21px;
        margin-bottom: 20px;
    }

    & p{
        max-width: 500px;
        line-height: 1.21;
        color: var(--fourth-color);
        font-size: 16px;
    }

    & select{
        min-width: 315px;
        width: 100%;
        background-color: transparent;
        border: 1px solid #9D9D9D66;
        padding: 16px 12px;
        padding-right: 40px; /* Add extra padding for the arrow */
        border-radius: 8px;
        margin-top: 30px;
        font-size: 16px;
        color: var(--fourth-color);
        -webkit-appearance: none;
        background-image: url('https://immofonds-triage.ch/wp-content/themes/fork-pw/assets/img/arrow.svg');
        background-repeat: no-repeat;
        background-position: right 12px center; /* Position the arrow */
        background-size: 12px; /* Adjust size as needed */

        &:focus {
            border: 1px solid var(--primary-color);
            outline: none; /* Helps with Safari's default focus style */
        }
    }

    & .text-over-logo{
        padding: 20px;
        font-size: 16px;
        line-height: 1.21;
        font-weight: 500;
        color: #fff;
        max-width: 625px;
    
        &.wincasa{
            background: var(--wincasa-background);
        }
    
        &.vebego{
            background: var(--vebego-background);
        }
    }

    & .logo-image{
        width: 232px;
        height: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    & .contact-link{
        margin-bottom: 15px;
        color: var(--fourth-color);
        font-size: 16px;

        & .img-block-contact{
            width: 20px;
            height: 20px;

            & img{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    }

    & .street-box{
        border: 1px solid var(--primary-color);
        border-radius: 10px;
    }

    & .title-street{
        font-size: 16px;
        line-height: 1.2;
    }
}


/*****************************************
             RESPONSIVE
*****************************************/

@media only screen and (min-width: 568px) {
    .question-block{

        & select{
            width: 315px;
        }
    }
}

@media only screen and (min-width: 992px) {
    .btn{
        margin-top: 60px;
    }

    .white-section{
        min-height: calc(100svh - 260px);
    }

    ul.lang-switcher-wrap{
        padding: 30px;

        & li{

            & a{
                font-size: 16px;
            }
        }
    }

    .question-block{
        padding: 0px 80px 80px 80px;

        & h1{
            font-size: 24px;
            margin-bottom: 30px;
        }

        & .logo-image{
            margin-top: 45px;
            margin-bottom: 45px;
        }

        & .contact-link{
            margin-bottom: 15px;
        }

        & .contact-link{
            font-size: 21px;
        }

        & .title-street{
            font-size: 18px;
        }
    }
}