/* Base level CSS for all standard pages */
/* the master language-based differentiator is using the htmltag class: lang-default, lang-zh */

/* Root variables */
    :root {
        /* media breakpoints */
        --media-xs-width: 576px;
		--media-sm-width: 769px;
		--media-md-width: 993px;
		--media-lg-width: 1200px;

        /* Colors */
        --color-normal-text: #222; /* Replace with your desired color */
        --color-h1: #333; /* Replace with your desired color */
        --color-link-text: #660000;
        --color-primary: rgba(131,0,0,1);
        --color-bright-red:rgba(231,55,46,1);
        --color-popupbg:rgba(15,41,47,0.8);
        --color-lightbg1:rgba(251,251,251,1);
        --color-vibrant-hd:#ec8d19;

        --color-callout-bg: #e9e4da;

        --color-dark-bg: #0f292f;
        --color-dark-red: rgba(131,0,0,1);
        --color-teal: #14a098;
        --color-default-white:#fff;
        --color-off-white: rgba(251,251,251,1);
        --color-off-white2: rgba(241,241,241,1);
        --color-success-green: #28a745;
        --color-almost-clear:rgba(0,0,0,0.1);
        --color-deep-green-alpha:rgba(30, 86, 49,0.3);
        --color-deep-green:rgba(30, 86, 49,1);
        --color-bright-green:rgba(164, 222, 2,1);
        --color-sameday:yellow;
        --color-bannerbg:#eceaea;
        --color-bannerborder:#d6d2d2;
        --color-keyline:rgba(241,241,241,1);
        --color-light-text:#ccc;

        /* Z-indices */
        --z-popupcontent:6100;
        --z-popupbg:6000;
        --z-viewer:5100;
        --z-viewerbg:5000;
        --z-mobmenu:2000;
        --z-banner:1000;
        --z-popmenu:800;
        --z-controls:500;
        --z-wishlisticon:100;
        --z-textoverlays:50;
    }

/* Colours */
    body .callout-bg {
        background-color: var(--color-callout-bg);
    }

    body .icon {
        color: var(--color-vibrant-hd);
    }

/* Language fonts */
/* Import fonts */
    /* ZH Standard type */
        @font-face {
            font-family: 'Noto Sans HK';
            src: url('/global/css/fonts/NotoSansHK-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Noto Sans HK';
            src: url('/global/css/fonts/NotoSansHK-Bold.ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Noto Sans HK';
            src: url('/global/css/fonts/NotoSansHK-ExtraLight.ttf') format('truetype');
            font-weight: lighter;
            font-style: normal;
            font-display: swap;
        }

    /* EN Standard type */
        @font-face {
            font-family: 'Source Sans 3';
            src: url('/global/css/fonts/SourceSans3-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Source Sans 3';
            src: url('/global/css/fonts/SourceSans3-Bold.ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
            font-display: swap;
        }

    /* h1 */
        @font-face {
            font-family: 'Montserrat';
            src: url('/global/css/fonts/Montserrat-ExtraLight.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

    /* old: roboto-cond */
        @font-face {
            font-family: 'Roboto Condensed';
            src: url('/global/css/fonts/Roboto_Condensed-Medium.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

/* EN/default */
    .lang-default 
    {
        font-family: "Source Sans 3", sans-serif;
        color:var(--color-normal-text);
    }

    .lang-default h1 {
        font-family: "Montserrat", sans-serif;
        font-weight: normal;
        font-optical-sizing: auto;
        color:var(--color-h1);
    }

    /* Outliers */
        .lang-default .text-cond 
        {
            font-family: "Roboto Condensed", sans-serif;
        }

/* ZH */
    .lang-zh 
    {
        font-family: "Noto Sans HK", sans-serif;
    }

    .lang-zh h1 {
        font-family: "Noto Sans HK", sans-serif;
        font-weight: lighter;
        font-optical-sizing: auto;
        color:var(--color-h1);
    }

/* Title styles */
    .titleblock-text {
        color:var(--color-default-white) !important;
    }

    .block-title
    {
        font-optical-sizing: auto;
        text-transform:uppercase;
    }

    .richtext-subhd {
        font-size:1rem; 
        font-weight:normal;
        margin-top:1.6rem;
    }

    .cardhd {
        font-weight:300;
    }

    .block-title
    {
        font-weight: 400;
    }

/* Other text styles */
    a {
        color:var(--color-normal-text);
    }
    
    a:hover {
        color:var(--color-link-text);
        text-decoration:none;
    }

    .dark-text {
		color:var(--color-normal-text);
	}

    .punchy-text {
        font-size: 1.6rem;
        color: var(--color-normal-text);
    }

/* Screen Size text adjustment */
    /* Above xs */
    @media (min-width: 576px) {
        body {
            font-size: 14px;
        }
        .hottitle {
            font-size: 3rem;
        }
        .hottitle-sm {
            font-size: 2rem;
        }
        .cardhd {
            font-size: 1rem;
        }
        .block-title {
            font-size: 1.6rem;
        }
    }

    /* Below xs */
    @media (max-width: 575px) {
        body {
            font-size: 12px;
        }
        .hottitle {
            font-size: 2rem;
        }
        .hottitle-sm {
            font-size: 1.5rem;
        }
        .cardhd {
            font-size: 1.2rem;
        }
        .block-title {
            font-size: 1.4rem;
        }
    }

/* Popup Stuff */
    .popup-bg {
        background-color: var(--color-popupbg);
        display: none;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        z-index: var(--z-popupbg);
        overflow: auto;
    }

    .popup-panel {
        background-color: var(--color-lightbg1);
        z-index: var(--z-popupcontent);
        border-radius: 10px;
        width: 80vw !important;
    }

/* Layout things */
    hr {
        border-top:1px dashed var(--color-keyline);
    }

    .panel-shadow {
        box-shadow: 0px 2px 4px #888888;
    }

    .content-panel {
        background-color:var(--color-off-white);
        border:1px solid var(--color-keyline);
        border-radius:10px;
    }

    /* gradients */
        .eco-bg {
            background-image: linear-gradient(to bottom right, var(--color-deep-green),var(--color-bright-green));
        }

        .gold-bg {
            background-image: linear-gradient(to bottom right, rgba(246,190,0,1), rgba(180,136,17,1));
        }

        .red-bg {
            background-image: linear-gradient(to bottom right, var(--color-primary),var(--color-bright-red));
        }
        

/* Enquiry Form */
    .enqform-panel {
        background-color:var(--color-off-white);
        border:1px solid var(--color-keyline);
        border-radius:10px;
    }

/* Unsorted */
/* navpage css */
/* Above xs */
@media (min-width: var(--media-xs-width)) {
    .navpage {
        background-color: rgba(236,234,234,0.95);
        display: none;
        position: absolute;
        max-height: 80%;
        z-index: 800; /* popmenu */
        overflow: hidden;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .navpage-text {
        color: #333333;
    }
    .navpage-btn {
        color: #333;
        background-color: #fff;
        border-color: #fff;
    }
    .navpage-btn:hover {
        color: #333;
        background-color: #e8e9ea;
        border-color: #d8d9da;
    }
}

/* Max xs */
@media (max-width: var(--media-sm-width)) {
    .navpage {
        background-color: #fff;
        display: none;
        position: fixed;
        top: 0px;
        left: 0px;
        bottom: 0px;
        max-height: 100%;
        z-index: 2000; /* mobmenu */
        overflow: auto;
    }
    .navpage-text {
        color: #333;
    }
    .navpage-entry {
        border-bottom: 1px solid #efefef;
    }
}

/* pointers for menu links */
.onclick-trigger {
    cursor: pointer;
}
.onhover-trigger {
    cursor: pointer;
}
.onclick-swapcontent {
    cursor: pointer;
}

/* topnav */
    .topnavbtn {
        font-weight: 500;
        padding: 5px 20px 5px 20px;
        background-color: #fff;
        text-transform: uppercase;
    }

    .topnavbtn a {
        color:var(--color-normal-text); 
        text-decoration: none;
    }

    .topnavbtn:hover, .topnavbtn a:hover {
        cursor: pointer;
        color:var(--color-link-text);
    }

.dt-menu-container {
    display: none;
    position: absolute;
    top: 101%;
    left: 0px;
    width: 100%;
    padding-bottom: 30px;
}
.mob-menu-container {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: var(--z-mobmenu);
}
.dt-menu-panel {
    background-color: #fff;
    width: 90%;
    display: inline-block;
    text-transform: none;
    max-height: 80vh;
    overflow: auto;
}
.mob-menu-panel {
    background-color: #fff;
    width: 100%;
    display: inline-block;
    text-transform: none;
    height: 100vh;
    overflow: auto;
}
.dt-menu-content {
    padding: 2vh;
}
.topmenu-page-title {
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    padding: 0;
    font-weight: 400;
}
.topmenu-title {
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-weight: 700;
}
ul.topmenu-entry-list {
    list-style-type: none;
    margin: 0;
    padding: 0 0 10px 0;
}
.topmenu-entry-list li {
    color: #333;
}

/* Common cols e.g. bg, keyline, border, etc */
.row-bg0 {
    background-color: var(--color-default-white);
}
.row-bg1 {
    background-color: var(--color-off-white);
}
.row-bg2 {
    background-color: var(--color-off-white2);
}

/* SVG icons */
.bi-stretch .bi {
    color: #ccc;
    width: 100%;
    height: 100%;
}

/* Favs */
.fav-btn-circle {
    position: absolute;
    top: 5px;
    left: 5px;
    height: 40px;
    width: 40px;
    border: 2px solid var(--color-keyline);
    padding: 0px;
    border-radius: 20px;
    background-color: #fff;
    cursor: pointer;
    z-index: var(--z-wishlisticon);
}
.fav-btn-circle .bi {
    color: var(--danger);
    transition: transform 0.3s ease;
}
.fav-btn-circle:hover {
    border-color: var(--light);
    background-color: var(--danger);
}
.fav-btn-circle:hover .bi {
    color: var(--light);
    transform: scale(1.2);
}

/* Menu */
.umenu li {
    font-weight: 300;
}

/* Banner */
.desktopTel {
    display: block;
    text-align: right;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: calc(10px + (32 - 10) * ((100vw - 250px) / (1920 - 250)));
    line-height: 0;
    color: var(--gray);
}
.desktopEmail {
    display: block;
    text-align: right;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: calc(10px + (28 - 12) * ((100vw - 250px) / (1920 - 250)));
    line-height: 0;
    margin-top: 5%;
    color: var(--danger);
}
.accountIcon {
    padding: 0 0 0 0;
    margin: 0 5px 0 5px;
    font-size: 1.4rem;
    color: #fff;
}
.langTxt {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
}

/* Search */
.search-suggestions-window {
    display: none;
    border: 1px solid #ccc;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: var(--z-controls);
    border-radius: 5px;
    padding: 1rem;
    margin: 0;
    background-color: #fff;
    max-height: 70vh;
    width: 95%;
    overflow: auto;
}
.search-window {
    display: none;
    border: 1px solid #ccc;
    position: absolute;
    top: 25px;
    left: -10px;
    z-index: var(--z-controls);
    border-radius: 5px;
    padding: 0px;
    margin: 20px;
    background-color: #fff;
    max-height: 70vh;
    width: 90%;
    overflow: auto;
}

.search-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.search-section-title {
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--color-dark-bg);
    padding: 20px 20px 10px 20px;
    margin-bottom: 0px;
}
.search-text-only {
    padding: 10px 20px 10px 20px;
    font-size: 1rem;
}
.search-text-only:hover {
    background-color: var(--color-dark-bg);
}
.search-text-only:hover a {
    color: #fff;
}

/* Login required */
.login-overlay-panel {
    background-color: var(--color-teal);
    border-radius: 5px;
}
.login-overlay-text {
    color: #fff;
}
.login-overlay-btn {
    background-color: var(--color-vibrant-hd);
}

/* Visibility */
.regFormVizForBots {
    display: none !important;
}

/* Transforms */
.swell {
    transition: transform 0.3s ease;
}
.swell:hover {
    transform: scale(1.01);
    z-index: 2;
}

/* Cards */
.overlay-block-bg {
    background-color: rgba(0,0,0,0.7);
    padding: 10px;
}

/* Dropdown menu */
.drop-down-btn {
    cursor: pointer;
}
.drop-down-btn:hover {
    background-color: #aaa;
    color: #000;
}

/* Mega menu */
.ulist {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.ulist li {
    border-top: 1px dashed #cccccc;
    padding: 5px 0px 5px 5px;
    margin: 0px 0px 0px 0px;
}
.mega-menu-nav-item {
    position: relative;
    cursor: pointer;
}
.mega-menu-nav-item:hover {
    background-color: #efefef;
}
.mega-menu-trigger {
    color: #000;
    text-decoration: none;
}
.mega-menu-trigger:hover {
    color: #000;
    text-decoration: none;
}
.mega-menu-sub-item {
    color: #000;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}
.mega-menu-sub-item:hover {
    color: #000;
    text-decoration: underline;
}
.mega-menu-wrapper {
    display: none;
    z-index: 200;
    border-top: 1px dashed #cccccc;
    background-color: #efefef;
}