/* Custom Component Popup Box (Popover) */
/* 
#theme-sup3 .freeformeditor-v2 .custom-popover-wrapper {position: relative; z-index: 90;}
#theme-sup3 .freeformeditor-v2 .custom-popover-wrapper .swiper {overflow: visible;}

.custom-popover {
    display: none;
    position: absolute;
    background-color: #dcf9f0; 
    border: 1px solid #333;
    border-radius: 15px;
    top:25px;
    left:-10px;
    padding: 10px;
    z-index: 10;
}

.popup-box { margin: 12px 0 20px;
    position: relative;
    cursor: pointer;
}

.popup-box .icon-ferry {display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 26px;
    padding-left: calc(42px + 6px);
    margin: 6px 0 5px;
    background-size: 42px 26px;
    background-image: url(/content/dam/dhk/intl/explore/great-outdoors/island-tourism/icon-ferry.svg); 
    background-repeat: no-repeat;
    background-position: left top;
    font-weight: 800 !important;
    color: #000000 !important;
}

.popup-box .icon-train {display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 26px;
    padding-left: calc(42px + 6px);
    margin: 6px 0 5px;
    background-size: 42px 26px;
     background-image: url(/content/dam/dhk/intl/explore/great-outdoors/island-tourism/icon-train.svg); 
    background-repeat: no-repeat;
    background-position: left top;
    font-weight: 800 !important;
    color: #000000 !important;
}
*/


/* v2 */
:root{
    --popover-font: 'Manrope', arial, system-ui, sans-serif;
    --popover-button-color: #000;
    --popover-box-font-size: 15px;
    --popover-box-h6-size: 19px;
    --popover-box-color: #000;
    --popover-box-bgcolor: #fff;
    --popover-box-border-color: #333;
    --popover-list-margin-top: 26px;
    --popover-list-margin-bottom: 32px;
    --popover-icon-gap: 10px;
}
@-moz-document url-prefix() { :root{--popover-font: 'Manrope', arial, 'PingFang TC', 'Microsoft JhengHei', \5FAE\8EDF\6B63\9ED1\9AD4, 'MHei', PMingLiU, system-ui, sans-serif;} }
html[lang="zh-CN"]{--popover-font: 'Manrope', 'Noto Sans SC', arial, system-ui, sans-serif;}

:is(div, span, a).has-popover{overflow:visible !important;}

.dhk-popover-list{display:flex; margin:var(--popover-list-margin-top) 0 var(--popover-list-margin-bottom); flex-direction:column; align-items:flex-start; gap:8px;}
.dhk-popover{display:inline-block; position:relative;}
.dhk-popover, .dhk-popover :is(div, span, p, a, li, table th, table td, h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 *){font-family:var(--popover-font) !important;}

.dhk-popover .popover-button{display:inline-block; cursor:default;}
.dhk-popover :is(.popover-button, .popover-button *){color:var(--popover-button-color); font-weight:800 !important;}
.dhk-popover-list :is(.popover-button, .popover-button *){line-height:1.35 !important;}
.dhk-popover span.icon{display:inline-flex !important; flex-direction:row; align-items:center; min-height:31px; padding-left:calc(28px + 10px); background-size:28px auto; background-repeat:no-repeat; background-position:left top;}
html[dir="ltr"] .dhk-popover :is(span.icon, span.icon *){color:var(--popover-box-color) !important; font-weight:800 !important;}
.dhk-popover span.icon-gift{min-height:31px; padding-left:calc(28px + var(--popover-icon-gap)) !important; background-size:28px auto; background-image:url(/content/dam/dhk/common/theme/2025/summer-viva/icon-gift.svg);}
.dhk-popover span.icon-ferry{min-height:26px; padding-left: calc(42px + var(--popover-icon-gap)) !important; background-size:42px 26px; background-image:url(/content/dam/dhk/intl/explore/great-outdoors/island-tourism/icon-ferry.svg);}
.dhk-popover span.icon-train{min-height:26px; padding-left: calc(42px + var(--popover-icon-gap)) !important; background-size:42px 26px; background-image:url(/content/dam/dhk/intl/explore/great-outdoors/island-tourism/icon-train.svg);}

.dhk-popover .popover-box{display:none; position:absolute; background-color:var(--popover-box-bgcolor); border:1px solid var(--popover-box-border-color); top:5px; top:98%; left:10px; padding:20px; width:500px; max-width:45vw; border-radius:12px; z-index:10;}
.dhk-popover :is(.popover-box, .popover-box *){color:var(--popover-box-color) !important; line-height:1.3 !important;}
.dhk-popover :is(.popover-box, .popover-box *):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *){font-size:var(--popover-box-font-size) !important; --main-font-size: var(--popover-box-font-size);}
.dhk-popover .popover-box p:not(:last-child){margin-bottom:20px !important;}
.dhk-popover .popover-box :is(h6, h6 *){font-size:var(--popover-box-h6-size) !important; font-weight:800 !important;}
.dhk-popover .popover-box .row{padding-left:0 !important; padding-right:0 !important; margin-left:-10px !important; margin-right:-10px !important;}
.dhk-popover .popover-box .row > .col{padding-left:10px !important; padding-right:10px !important;}
.dhk-popover .popover-box .row:not(:last-child){margin-bottom:22px !important;}


@media (max-width: 991.98px) {
    .dhk-popover .popover-box .row{gap:15px;}
}

@media (max-width: 767.98px) {
    :root {
        --popover-box-font-size: 14px;
        --popover-box-h6-size: 17px;
        --popover-list-margin-top: 22px;
        --popover-list-margin-bottom: 28px;
    }
    .dhk-popover .popover-box{padding:15px; width:300px; max-width:none; border-radius:10px;}
    .dhk-popover .popover-box .row{gap:10px;}
}