/* ============================================================
   HOTSPOT STYLES
============================================================ */

.ggskin.ggskin_hotspot .ggskin.ggskin_text > div {
    font-family: 'Arial',sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
    transition: transform .3s ease-in-out;
    border: solid 3px;
    cursor: pointer;
}

    .ggskin.ggskin_hotspot .ggskin.ggskin_text > div:hover {
        transform: scale(1.3);
    }

/* Temperature */

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectTemperatureBlue > div {
    background: #1E3A8A;
    color: #E0F2FE;
}

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectTemperatureGreen > div {
    background: #15803D;
    color: #ECFDF5;
}

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectTemperatureOrange > div {
    background: #D97706;
    color: #FFF7ED;
}

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectTemperatureRed > div {
    background: #B91C1C;
    color: #FEE2E2;
}

/* Wind */

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectWind > div {
    background: #ADD8E6;
    color: #115b73;
}

/* Other hotspots */

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectInfo > div {
    font-family: 'Times New Roman',serif;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    background: #000;
    color: #fff;
}

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectImage > div {
    font-family: 'Font Awesome 6 Free';
    font-size: 22px;
    background: #000;
    color: #fff;
}

    .ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectImage > div::before {
        content: "\f03e";
    }

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectUrl > div {
    font-family: 'Font Awesome 6 Free';
    font-size: 27px;
    background: #000;
    color: #fff;
}

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectPrice > div {
    background: #000;
    color: #fff;
    font-size: 12px;
}

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectPOI > div {
    font-family: 'Font Awesome 6 Free';
    background: #000;
    color: #fff;
    font-size: 17px;
}

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectCarPark > div {
    background: #005BAC;
    color: #fff;
    font-size: 20px;
    font-family: 'Arial';
}

.ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectPrivacyZone > div {
    font-family: 'Font Awesome 6 Free';
    font-size: 22px;
    background: #000;
    color: #fff;
}

    .ggskin.ggskin_hotspot .ggskin.ggskin_text.vtConnectPrivacyZone > div::before {
        content: "\f023";
    }


/* ============================================================
   MODAL BACKGROUND
============================================================ */

.infoBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../images/background.jpg") !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    z-index: 9999;
}

    .infoBg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.75));
    }


/* ============================================================
   MODAL CONTENT
============================================================ */

.infoContentBg {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    padding: 3.5rem 4rem 3rem 4rem !important;
    border-radius: 22px;
    max-height: 76vh !important;
    overflow: hidden !important;
    background: linear-gradient( 180deg, rgba(14,14,14,.70), rgba(10,10,10,.76) );
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 30px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}

    .infoContentBg,
    .infoContentBg * {
        color: #fff !important;
    }


/* ============================================================
   SCROLLING CONTENT
============================================================ */

.infoTextBody {
    height: 100%;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}

    /* Scrollbar */

    .infoTextBody::-webkit-scrollbar {
        width: 6px;
    }

    .infoTextBody::-webkit-scrollbar-track {
        background: transparent;
    }

    .infoTextBody::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.25);
        border-radius: 20px;
    }


/* ============================================================
   SCROLL FADE
============================================================ */

.infoContentBg::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    pointer-events: none;
    background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(10,10,10,.85) 80%, rgba(10,10,10,1) 100% );
}


/* ============================================================
   VIRTUAL TOUR CONTENT
============================================================ */

#vt-content {
    margin: 0 auto;
    padding-right: 1rem !important;
    max-width: 620px;
}

    #vt-content .vt-section {
        margin-bottom: 2rem !important;
    }

    #vt-content .vt-heading {
        font-family: 'Cinzel',Georgia,serif;
        margin-bottom: 1rem !important;
        line-height: 1.08;
        font-weight: 600;
    }

        #vt-content .vt-heading::after {
            content: "";
            display: block;
            width: 64px;
            height: 3px;
            margin-top: .8rem;
            border-radius: 999px;
            background: linear-gradient( 90deg, #cf5a3a, rgba(207,90,58,.12) );
        }

    #vt-content .vt-heading-lg {
        font-size: clamp(2.2rem,4vw,3.2rem);
    }

    #vt-content .vt-heading-md {
        font-size: clamp(1.8rem,2.8vw,2.4rem);
    }

    #vt-content .vt-paragraph {
        line-height: 1.8;
        font-size: 1.05rem;
        max-width: 62ch;
        color: rgba(255,255,255,.9) !important;
    }

        #vt-content .vt-paragraph a {
            font-weight:bold;
            color: #c04b2b !important;
        }

/* ============================================================
   WEATHER TABLE
============================================================ */
#vt-content .vt-weather-table {
    width: 100%;
    border-collapse: separate;
    margin-top: 1rem;
}

        #vt-content .vt-weather-table th,
        #vt-content .vt-weather-table td {
            padding: .8rem 0;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

        #vt-content .vt-weather-table th {
            text-align: left;
            font-size: .8rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: rgba(255,255,255,.65) !important;
        }

        #vt-content .vt-weather-table td {
            text-align: right;
            font-size: 1.25rem;
            font-family: 'Cinzel',Georgia,serif;
        }

        #vt-content .vt-weather-table th i {
            margin-right: .6rem;
            color: #cf5a3a !important;
        }


/* ============================================================
   MOBILE FIXES
============================================================ */

@media (max-width:640px) {

    .infoContentBg {
        width: 92%;
        max-width: 92%;
        padding: 2rem 1.6rem 6rem 1.6rem !important;
        border-radius: 18px;
    }

    .infoTextBody {
        padding-right: 1rem;
    }

    #vt-content {
        max-width: 100%;
    }

        #vt-content .vt-heading-lg {
            font-size: clamp(1.8rem,7vw,2.3rem);
        }

        #vt-content .vt-heading-md {
            font-size: clamp(1.45rem,5vw,1.9rem);
        }

        #vt-content .vt-paragraph {
            font-size: 1rem;
            line-height: 1.7;
        }

        /* Weather mobile */

        #vt-content .vt-weather-table th {
            font-size: .75rem;
            width: 60%;
        }

        #vt-content .vt-weather-table td {
            font-size: 1rem;
        }

    /* smaller scroll fade */

    .infoContentBg::after {
        height: 50px;
    }
}

/* ============================================================
   POLAROID IMAGE STYLE
============================================================ */

#vt-content img,
.vt-image,
.ggskin_external img {
    display: block;
    margin: 2rem auto;
    max-width: 100%;
    height: auto;
    background: #ffffff;
    padding: 12px 12px 32px 5px; /* thicker bottom for polaroid look */

    border-radius: 2px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.3);
}

    /* Optional subtle "photo on table" feel */

    #vt-content img:nth-child(odd) {
        transform: rotate(-1deg);
    }

    #vt-content img:nth-child(even) {
        transform: rotate(1deg);
    }