﻿.TypeIcon {
    margin: 1em;
}

    .TypeIcon img {
        vertical-align: middle;
    }

    .TypeIcon span {
        font-size: 1.25em;
        color: #337ab7;
        font-weight: bold;
        padding: 0.25em;
    }

.TypeList {
    padding: 0 0.5em !important;
}

    .TypeList > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .TypeList > ul > li {
            color: #808080;
            background: #e3e3e3;
            padding: 0.5em 1em;
            margin: 0.5em 0;
            border-radius: 20px;
            font-weight: bold;
            cursor: pointer;
        }

            .TypeList > ul > li:hover,
            .TypeList > ul > li.active {
                color: #fff;
                background: #0071bc;
            }

.Textsearch {
    left: 1em;
    top: 1em;
    background-color: transparent;
}

    .Textsearch input {
        width: 18em;
        padding: 0.25em;
        border-radius: 4px;
        font-size: 1.15em;
    }

        .Textsearch input::-webkit-input-placeholder {
            font-size: 1.15em;
        }

.Poisearch {
    margin: 0.5em 0;
}

    .Poisearch img {
        margin-right: 0.25em;
        cursor: pointer;
    }

.Typesearch {
    top: 0.5em;
    right: 1em;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}

    .Typesearch ul {
        list-style: none;
        padding: 0;
    }

.submenu {
    display: none;
}

.Typesearch > ul > li:hover .submenu {
    display: block;
}



.Typesearch > ul img {
    width: 3.75em;
    cursor: pointer;
}

.FeatureTool {
    bottom: -1em;
    right: 1em;
    background-color: transparent;
}

    .FeatureTool > ul {
        list-style: none;
    }

        .FeatureTool > ul img {
            width: 3.75em;
            cursor: pointer;
        }

.Divider {
    opacity: 1;
    margin: 3% 0;
    border-top: solid #808080 2px;
}

.TypeInfo {
    margin: 0.5em;
    min-width: 50vw;
}

    .TypeInfo ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .TypeInfo ul li {
            padding: 0.2em 0;
            font-size: 1.2em;
            color: #808080;
        }

    .TypeInfo img {
        width: 1.25em;
        margin-right: 0.5em;
    }

    .TypeInfo label {
        font-size: 1.2em;
        font-weight: bold;
        color: #0071bc;
        padding: 0.5em 0;
    }


.colorBlock {
    display: inline-block;
    width: 2em;
    height: 0.85em;
    margin-right: 0.5em;
}

.typeColor_r {
    background: #ff616d;
}

.typeColor_g {
    background: #1B8d56;
}

.typeColor_y {
    background: #ffba62;
}

.typeColor_b {
    background: #0071bc;
}

.typeColor_garyb {
    background: #c4dff5;
}

.autocomplete {
    position: relative;
    width: 300px;
}

.keySearch ul {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 15em;
    overflow-y: auto;
    font-size: 1.2em;
}

.keySearch .no-result {
    padding: 8px;
    color: #999;
    text-align: center;
}

    .keySearch .no-result:hover {
        color: #999 !important;
        background-color: #FFF !important;
        cursor: none;
    }

.ListContainer {
    display: none;
    background-color: white;
    max-width: 95%;
    font-size: 1.2em;
}

    .ListContainer > div:first-child {
        cursor: pointer;
        height: 1em;
        width: 1em;   
        top: 5.65em;
        right: 1.5em;
        position:absolute;
    }


    .ListContainer > h5 {
        color: #FFF;
        background-color: #0071bc;
        padding: 0.25em;
    }

    .ListContainer > ul {
        list-style: none;
        margin: 0;
        padding: 0 0.25em;
        max-height: 15em;
        overflow-y: auto;
    }

        .keySearch > ul > li:hover,
        .ListContainer > ul > li:hover {
            color: #FFF;
            background-color: #0071bc;
            cursor: pointer;
        }

        .ListContainer > ul > li.active {
            color: #FFF;
            background-color: #0071bc;
        }


#ParkInfoWindow .guidelines {
    background-color: #0071bc;
    margin-top: 1em;
}

    #ParkInfoWindow .guidelines a {
        color: #FFF;
        padding: 0.5em;
        font-size: 1.2em;
        text-align: center;
        text-decoration: none;
        width: 50%;
    }

        #ParkInfoWindow .guidelines a:first-child {
            border-right: #FFF solid 1px;
        }

    #ParkInfoWindow .guidelines div {
        color: #FFF;
        padding: 0.5em;
        font-size: 1.2em;
        text-align: center;
        cursor: pointer;
    }

        #ParkInfoWindow .guidelines div:first-child {
            border-right: #FFF solid 1px;
        }

#ParkInfoWindow {
    max-width: 22vw;
}

    #ParkInfoWindow ul {
        list-style: none;
        font-weight: bold;
        font-size: 1.1em;
        margin: 0;
        padding: 0 0.75em;
        text-align: justify;
    }

        /*     #ParkInfoWindow ul li {
            margin: 0.25em 0;
        }*/

        #ParkInfoWindow ul li img {
            padding-right: 0.5em;
            width: 1.5em;
        }

        #ParkInfoWindow ul .infoText {
            display: block;
            margin-left: 1.5em; /* 圖片寬度 + 間距，需手動調整 */
            text-indent: -1.5em; /* 讓第一行縮回來對齊文字起始 */
        }

        #ParkInfoWindow ul li a {
            color: #666;
            font-size: 2.2em;
            font-weight: bolder;
            text-decoration: none;
        }

        #ParkInfoWindow ul li span {
            color: #666;
            padding: 0;
            font-size: 0.7em;
        }

    #ParkInfoWindow .detailArea {
        max-height: 50vh;
        overflow-y: auto;
        margin: 1em 0;
    }

    #ParkInfoWindow .detailType {
        padding: 0;
    }

        #ParkInfoWindow .detailType .mainInfo {
            display: flex;
            align-items: center;
            padding: 0 1em;
            margin: 0;
        }

.mainInfo div {
    width: 65%;
    text-align: right;
}

.expand-button {
    position: absolute;
    top: 2.25em;
    right: 0.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    width: 1.2em;
    height: 1.2em;
    background-color: transparent;
    transition: transform 0.3s ease;
}

    .expand-button.expanded {
        transform: rotate(180deg);
    }

.expand-detail {
    background-color: #FFF;
    color: #000;
}

    .expand-detail li {
        display: flex;
        align-items: center;
        padding: 0.5em 1em;
        text-align: right;
    }

        .expand-detail li > div:nth-child(2), .expand-detail li > div:nth-child(3) {
            text-align: left;
        }


    .expand-detail img {
        width: 3em !important;
    }

#ParkInfoWindow .detailType > li {
    position: relative;
    /*   display: flex;
            align-items: center;
            padding: 0 1em;
            margin: 0;*/
}

    /*#ParkInfoWindow .detailType > li div {
                margin-left: auto;
                text-align: right;
                margin-right: 1.25em;
            }*/

    #ParkInfoWindow .detailType > li span {
        color: #fff !important;
        font-size: 1.1em;
        font-weight: 520;
        letter-spacing: 0.02em;
    }

#ParkInfoWindow .detailType img {
    width: 6em;
}

#ParkInfoWindow .thumbnail img {
    width: 4.8em;
}

#ParkInfoWindow .detail-mode {
    display: flex;
    justify-content: center;
    gap: 1em; /* 控制按鈕間距 */
    margin-bottom: 1em;
}



#ParkInfoWindow .guidebtn {
    text-align: center;
    font-size: 1.2em;
    padding: 0.5em;
    border-radius: 0.5em;
    background: #0071bc;
    color: #FFF;
    width: 45%;
    text-decoration: none;
}



#ParkInfoWindow .detailBtn {
    width: 65%;
    padding: 0.5em;
    color: #FFF;
    font-size: 1.2em;
    border: 0;
    border-radius: 0.5em;
    background-color: #00b3c4;
}

#ParkInfoWindow .illustrate {
    padding: 0.75em;
}

    #ParkInfoWindow .illustrate h6 {
        color: #00afc0;
    }

    #ParkInfoWindow .illustrate div {
        text-align: justify;
    }

#ParkInfoWindow .row {
    --bs-gutter-x: 1.0rem;
}

#ParkInfoWindow > div:last-child {
    padding: 0 !important;
}

#ParkInfoWindow .returnInfo {
    cursor: pointer;
    height: 2em;
    width: 2em;
    position: absolute;
    bottom: 1em;
    right: 1em;
}

  /*  #ParkInfoWindow .returnInfo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }*/

#ReturnInfoWindow {
    margin-top: 3em;
    min-width: 16vw;
}

    #ReturnInfoWindow ul {
        list-style: none;
        font-size: 1.1em;
        margin: 1em 0;
        color: #a4a4a4;
    }

        #ReturnInfoWindow ul li {
            margin: 1em 0;
        }

            #ReturnInfoWindow ul li label {
                margin: 0 0.5em;
                cursor: pointer;
            }

    #ReturnInfoWindow #returnText {
        max-width: 65%;
    }

    #ReturnInfoWindow div:last-child {
        text-align: center;
        font-size: 1.1em;
    }

        #ReturnInfoWindow div:last-child button {
            margin: 0 0.5em;
            width: 7em;
            border: 0;
            padding: 0.25em;
            color: #FFF;
        }

            #ReturnInfoWindow div:last-child button:first-child {
                background-color: #808080;
            }

            #ReturnInfoWindow div:last-child button:last-child {
                background-color: #0071bc;
            }

.favoriteEmpty {  
    cursor: pointer;
    width: 1.5em;
    display: inline-block;
    vertical-align: middle;
}

.favoriteFull {   
    cursor: pointer;
    width: 1.5em;
    display: inline-block;
    vertical-align: middle;
}
    .ListContainer > div:first-child img, #ParkInfoWindow .returnInfo img,
    .favoriteEmpty img, .favoriteFull img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
