/*
Theme Name: Vila Vasilj Vodice
Author: Vasilj
Author URI:
Description: Mein eigenes Theme
Version: 1.0
License:
License URI:
*/

.nav ul {
    /*display: flex;*/
    justify-content: center;
}
.menu-item{
    padding: 0 19px;
    list-style: none;
    color: white;
}
.menu-item a {
    color: white;
    text-decoration: none;
    font-size: larger;
}
.menu-item span {
    color: white;
}
.sub-menu span {
    color: black;
}
.custom-logo {
    width: 75%;
    height: auto;
}
.header {
    background-color: #B2AB98;
}
.text-end {
    color: white;
}
.vasilj-custom-logo {
    width: 72%;
}
/* Dropdown-Menü verstecken */
.sub-menu {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    background-color: #fff; /* Hintergrundfarbe */
    border: 1px solid #ddd; /* Rand */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Schatten */
    z-index: 1000;
    font-size: small;
}
.menu {
    display: flex;
}
/* Dropdown sichtbar machen, wenn über das Hauptmenü gefahren wird */
.menu-item-has-children:hover .sub-menu {
    display: block;
}

/* Styling für die Dropdown-Links */
.sub-menu li a {
    padding: 10px;
    color: #000;
    text-decoration: none;
    display: block;
}

.sub-menu li a:hover {
    background-color: #f1f1f1;
}
#menu-header-menu {
    display: flex;
    justify-content: space-evenly;
}
/*--FOOTER - Start--*/
.footer-social-media {
    display: flex;
    gap: 15px; /* Abstand zwischen den Icons */
    justify-content: center;
    margin-top: 20px;
}

.footer-social-media a {
    font-size: 24px; /* Größe der Icons */
    color: #333; /* Standardfarbe */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-social-media a:hover {
    color: #1da1f2; /* Farbe bei Hover (z. B. für Instagram blau) */
}
/*--FOOTER - ENDE--*/
.entry-title {
    display: none;
}
.wp-block-vasiljtemplate-image-text-block {
    display: flex;
}
.wp-block-vasiljtemplate-text-image-block {
    display: flex;
    margin-bottom: 45px;
}
.wp-block-vasiljtemplate-icon-text-block {
    display: flex;
    flex-direction: row;
}
.image-section-img {
    width: 90%;
}
.image-section-2 img {
    width: 80%;
}
.text-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.icon-text-block {
    text-align: center;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    max-width: 305px;
    margin: 20px auto;
}

.icon-text-icon {
    font-size: 2em;
    margin-bottom: 10px;
}

.icon-text-text {
    font-size: 1rem;
    color: #333;
}
.wp-block-video {
    display: flex;
    justify-content: center;
}
.wp-block-video video {
    width: 30%;
}
#ms-footer {
    background-color: #6d685a;
    height: 140px;
}
.carousel-inner img {
    width: 100%; /* Bild passt sich an die Breite des Containers an */
    height: 580px; /* Einheitliche Höhe für alle Bilder */
    object-fit: cover; /* Schneidet das Bild so zu, dass es den Container ausfüllt */
}
.fancybox-button--close {
    background-color: transparent;
    color: #fff;
    font-size: 24px;
    border: none;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 9999;
    cursor: pointer;
}

.fancybox-button--close:hover {
    color: #f00; /* Beispiel für Hover-Effekt */
}
.wp-block-vasiljtemplate-unterkunft-icons-block  {
    max-width: 100%;
}
.wp-block-vasiljtemplate-unterkunft-icons-block .unterkunft-boxes {
    margin-top: 20px;
    margin-bottom: 20px;
}
.wpbs-main-wrapper {
    display: flex;
    justify-content: center;
}
.col-12 .wpbs-main-wrapper #wpbs-form-1 {
    margin: 0 50px !important;
}
/* -- LANGUAGE-SWITCH-START -- */
.language-switcher {
    position: relative;
    display: inline-block;
}

.language-button {
    background-color: transparent;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-button:hover {
    background-color: transparent;
}

.flag-icon {
    width: 20px;
    height: auto;
}

.language-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 150px;
    z-index: 1000;
}

.language-dropdown li {
    margin: 0;
    padding: 0;
}

.language-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.language-dropdown a:hover {
    background-color: #f0f0f0;
}

.language-switcher:hover .language-dropdown {
    display: block;
}

/* -- LANGUAGE-SWITCH-END -- */
@media (max-width: 768px) {
    .header .logo {
        text-align: left;
    }
    .header .header-links {
        text-align: center;
    }
    #menu-header-menu {
        display: flex;
        flex-direction: column;
    }
    .menu {
        flex-direction: column;
    }
    .mobile-carousel-container {
        width: 100%;
    }
    .carousel-inner img {
        width: 5%;
        height: auto;
    }
    #mobileCarousel {
        text-align: center;
        padding: 0 10px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #f9f9f9;
        max-width: 460px;
        margin: 20px auto;
    }
    .custom-logo {
        width: 65%;
    }
    #my-logo{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #madeby {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    #soziale-m {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px 0;
    }
    .row .col-12 .wp-block-vasiljtemplate-image-text-block {
        display: flex;
        flex-direction: column-reverse; /* Bild unter den Text setzen */
        text-align: center;
    }

    .row .col-12 .wp-block-vasiljtemplate-text-image-block {
        display: flex;
        text-align: center;
    }

    .image-section-2, .text-section {
        width: 100%;
    }

    .image-section-img {
        max-width: 100%;
        height: auto;
    }
    .menu-item {
        padding: 0;
    }
    .logo a {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .language-button .language-name {
        display: none;
    }
    .language-switcher {
        position: relative; /* Wichtig für Dropdown-Positionierung */
        display: inline-block;
    }

    .language-dropdown {
        position: absolute;
        top: 100%; /* Direkt unter dem Button */
        left: 0;    /* Links ausgerichtet am Button */
        margin: 0;
        padding: 0;
        list-style: none;
        background: white;
        border: 1px solid #ccc;
        min-width: 150px; /* je nach Bedarf */
        z-index: 1000; /* Über anderen Elementen */
        display: none; /* Dropdown standardmäßig verstecken */
    }

    /* Dropdown sichtbar machen wenn gewünscht */
    .language-switcher:hover .language-dropdown,
    .language-switcher:focus-within .language-dropdown {
        display: block;
    }
    .language-button .droptdown-language-name {
        display: none;
    }

}
@media (max-width: 576px) {
    .col-12 .wp-block-vasiljtemplate-image-text-block, .wp-block-vasiljtemplate-text-image-block, .wp-block-vasiljtemplate-icon-text-block {
        display: flex;
        flex-direction: column;
    }
    .trp-language-switcher .trp-ls-shortcode-current-language {
        width: 125px !important;
    }
    .trp-language-switcher > div {
        padding: 4px 33px 3px 0;
        background-position: calc(100% - 10px) calc(1em + 2px), calc(100% - 3px) calc(1em + 0px);
    }
    .trp-language-switcher {
        width: 120px;
    }
    .trp-ls-shortcode-language {
        width: 130px !important;
    }
    .col-12 .wp-block-video video {
        width: 100%;
    }
    .carousel-inner img {
        width: 5%;
        height: auto;
    }
    #mobileCarousel {
        text-align: center;
        padding: 0 10px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #f9f9f9;
        max-width: 460px;
        margin: 20px auto;
    }
    .custom-logo {
        width: 96%;
    }
    .language-dropdown {
        width: 92px;
    }
    .menu-item {
        padding: 0;
    }
    .language-dropdown {
        min-width: 70px;
    }
}
@media (max-width: 992px) {
    .col-12 .wp-block-vasiljtemplate-image-text-block, .wp-block-vasiljtemplate-text-image-block, .wp-block-vasiljtemplate-icon-text-block {
        display: flex;
        flex-direction: column;
    }
    .col-12 .wp-block-video video {
        width: 50%;
    }
    #ms-footer {
        height: auto;
    }
    #carouselExample .carousel-inner img {
        height: 500px;
    }
    #mobileCarousel .carousel-inner img {
        width: 5%;
        height: auto;
    }
    #mobileCarousel {
        text-align: center;
        padding: 0 10px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #f9f9f9;
        max-width: 460px;
        margin: 20px auto;
    }
    #mobileCarousel .carousel-inner .carousel-item {
        height: 365px;
    }
    .row .col-12 .wp-block-vasiljtemplate-image-text-block {
        display: flex;
        flex-direction: column-reverse; /* Bild unter den Text setzen */
        text-align: center;
    }

    .row .col-12 .wp-block-vasiljtemplate-text-image-block {
        display: flex;
        text-align: center;
    }

    .image-section-2, .text-section {
        width: 100%;
    }

    .image-section-img {
        max-width: 100%;
        height: auto;
    }

}
@media (max-width: 1200px) {
    #ms-footer {
        height: auto;
    }
    .wp-block-vasiljtemplate-icon-text-block .row .col-lg-3 {
        width: 24%;
    }

}
@media (min-width: 1200px) {
    .wp-block-vasiljtemplate-icon-text-block .row .col-lg-3 {
        width: 24%;
    }
}
.carousel-item {
    position: relative;
}

#carouselExample .carousel-item .carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
    z-index: 10; /* Sicherstellen, dass der Text über dem Bild liegt */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}
.form-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.form-submit {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.form-submit:hover {
    background-color: #45a049;
}

label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

input, textarea {
    box-sizing: border-box;
}
.slider-title {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
}
.kalender-hinweis {
    font-weight: bold;
    color: red;
}
td.in-date-range {
    background: rgb(from var(--wpbc_cal-selected-day-color) r g b / max(var(--wpbc_cal-day-bg-color-opacity), var(--wpbc_cal-selected-day-bg-color-opacity)));
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-selected-day-color);
}
.wpbc__field .wpbc__form__div .wpbc__row .wpbc_r_gesamtpreis-input {
    display: none;
}
#footer-logo {
    max-width: 55%;
}
#soziale-m p, #madeby p {
    font-size: larger;
}
#soziale-m a {
    color: white;
    text-decoration: none;
}
#my-logo, #spzial-m{
    display: flex;
    justify-content: center;
    align-items: center;
}
.whatsapp-icon {
    text-decoration: none;
}
#soziale-m {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#madeby a {
    color: white;
    text-decoration: none;
}
#madeby {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#my-logo a {
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-section{
    display: flex;
    justify-content: center;
}