@charset "utf-8";
/* CSS Document */

     /* ==========================================
           start of drawer css
           ========================================== */
#drawer-component .drawer {
    
    height: 100svh;
}

    #drawer-component .panel { 
	padding-bottom:100px!important;	
}
        /* Overlay */
        #drawer-component .drawer__overlay {
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: flex-start;
            justify-content: flex-end;
            width: 100%;
            min-height: 100svh;
        }

        /* Drawer wrapper */
        #drawer-component .drawer {
            display: flex;
            gap: 12px;
            align-items: stretch;
            /* 关键修复: 让子元素拉伸填满高度 */
            justify-content: flex-end;
            overflow: hidden;
            height: 100%;
            /* 继承父容器高度 */
        }

        /* Back/close button column */
        #drawer-component .drawer-close {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding-top: 12px;
            flex-shrink: 0;
            align-self: flex-start;
            /* 防止拉伸，保持从顶部开始 */
        }

        #drawer-component .icon-close {
            width: 32px;
            height: 32px;
            position: relative;
            cursor: pointer;
            flex-shrink: 0;
        }

        #drawer-component .icon-close svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* Main panel */
        #drawer-component .panel {
            background: white;
            width: 100%;
            width: 800px;
            flex: 1;
            /* 填满剩余空间 */
            min-height: 0;
            /* 防止 flex 溢出 */
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            overflow-y: auto;
            /* 关键: 允许纵向滚动 */
            margin-bottom: 0px !important;
        }

        #drawer-component .media-text-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 10px 32px 40px 32px;
            width: 100%;
        }

        /* Introduction column */
        #drawer-component .introduction {
            display: flex;
            flex-direction: column;
            gap: 40px;
            align-items: center;
            width: 100%;
        }

        /* Media / image carousel */
        #drawer-component .media-carousel {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
            width: 100%;
            max-width: 800px;
            flex-shrink: 0;
        }

        #drawer-component .featured-image {
            /*aspect-ratio: 300 / 200;*/
            width: 100%;
            /* overflow: hidden;
             position: relative;
             background: #ededf2;
             flex-shrink: 0;*/
        }

        #drawer-component .featured-image img {
            /* width: 100%;
             height: 100%;
             object-fit: cover;
             display: block;*/
        }

        /* Title block */
        #drawer-component .featured-title {
            width: 100%;
        }

        #drawer-component .featured-title h1 {
            font-family: 'Red Hat Text', sans-serif;
            font-weight: 900;
            font-size: 30px;
            line-height: 36px;
            color: #022169;
            word-break: break-word;
        }

        /* Body text */
        #drawer-component .featured-body {
            width: 100%;
            font-family: 'Red Hat Text', sans-serif;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
            letter-spacing: 0.2px;
        }

        /* CTA buttons */
        #drawer-component .cta-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: flex-start;
            width: 100%;
        }

        #drawer-component .btn {
            height: 46px;
            min-width: 88px;
            padding: 8px 20px;
            border-radius: 4px;
            font-family: 'Red Hat Text', sans-serif;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            cursor: pointer;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #drawer-component .btn-primary {
            background-color: #fecf13;
            color: #022169;
            border: none;
        }

        #drawer-component .btn-secondary {
            background-color: transparent;
            color: #022169;
            border: 2px solid #022169;
        }

#drawer-component .btn-secondary {
    background-color: transparent!important;
    color: var(--rh-themecolor-primary)!important;
    border: 2px solid var(--rh-themecolor-primary)!important;
}


        /* Disclaimer */
        #drawer-component .disclaimer {
            width: 100%;
            font-family: 'Red Hat Text', sans-serif;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #939598;
            letter-spacing: 0.2px;
        }

        /* ==========================================
           ADDED: HKJC Sliding Animation & Transitions
           ========================================== */
        #drawer-component {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
        }

        /* Active dynamic state */
        #drawer-component.is-open {
            opacity: 1;
            visibility: visible;
        }

        /* Set target positioning rules to overlay for full screen tracking */
        #drawer-component .drawer__overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }

        /* HKJC Right to Left cubic easing curve transform */
        #drawer-component .drawer {
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #drawer-component.is-open .drawer {
            transform: translateX(0);
        }

        @media (max-width: 1200px) {

            /* Main panel */
            #drawer-component .panel {
                background: white;
                width: 644px;
                flex-shrink: 0;
                display: flex;
                align-items: flex-start;
            }
        }

        @media (max-width: 700px) {
            #drawer-component .panel {
                width: 100%;
                max-width: 644px;
            }

            #drawer-component .drawer {
                display: flex;
                gap: 12px;
                align-items: flex-end;
                justify-content: flex-end;
                overflow: hidden;
                flex-direction: column;
                background: #fff;
                /* padding-right: 12px; */
                height: 100%;
            }

            #drawer-component .drawer-close {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: center;
                padding-top: 12px;
                flex-shrink: 0;
                padding-right: 12px;
                align-self: flex-end;
                /* 移动端关闭按钮从顶部开始 */
            }

            #drawer-component .icon-close svg path {
                stroke: #022169;
                /* You can also use #000000 */
            }
        }

        @media (max-width: 375px) {
            #drawer-component .media-text-content {
                padding: 10px 16px 20px 16px;
            }

            /* Introduction column */
            #drawer-component .introduction {
                display: flex;
                flex-direction: column;
                gap: 24px;
                align-items: center;
                width: 100%;
            }

            #drawer-component .featured-title h1 {
                font-family: 'Red Hat Text', sans-serif;
                font-size: 24px;
                line-height: 32px;
                color: #022169;
                word-break: break-word;
            }

            #drawer-component .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                height: 46px;
                min-width: 88px;
                padding: 8px 20px;
                border-radius: 4px;
                font-family: 'Red Hat Text', sans-serif;
                font-size: 14px;
                font-weight: 500;
                line-height: 20px;
                text-align: center;
                cursor: pointer;
                white-space: nowrap;
                text-decoration: none;
            }

            #drawer-component .content {
                padding: 24px 16px;
                display: flex;
                flex-direction: column;
                gap: 24px;
            }

            /* Body text */
            #drawer-component .featured-body {
                width: 100%;
                font-family: 'Red Hat Text', sans-serif;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                letter-spacing: 0.2px;
                color: #000;
                word-break: break-word;
            }
        }
        /* ==========================================
           end of drawer css
           ========================================== */

        /* ---- 自定义内容在面板中的基础样式 ---- */
        #drawer-component .panel>* {
            width: 100%;
            /* padding: 0 32px 40px 32px;*/
        }

        #drawer-component .panel h2 {
            font-family: 'Red Hat Text', sans-serif;
            font-weight: 700;
            font-size: 28px;
            line-height: 36px;
            color: #022169;
            margin: 32px 0 16px 0;
        }

        #drawer-component .panel p {
            font-family: 'Red Hat Text', sans-serif;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
            margin: 0 0 12px 0;
        }

        #drawer-component .panel ul,
        #drawer-component .panel ol {
            padding-left: 24px;
            margin: 0 0 12px 0;
        }

        #drawer-component .panel ul li,
        #drawer-component .panel ol li {
            font-family: 'Red Hat Text', sans-serif;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #000;
        }

        #drawer-component .panel label {
            font-family: 'Red Hat Text', sans-serif;
            font-weight: 500;
            font-size: 14px;
            color: #022169;
        }

        #drawer-component .panel input[type="email"],
        #drawer-component .panel input[type="text"],
        #drawer-component .panel textarea {
            font-family: 'Red Hat Text', sans-serif;
            font-size: 16px;
            padding: 10px 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
        }

        #drawer-component .panel button {
            font-family: 'Red Hat Text', sans-serif;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            padding: 8px 24px;
            border-radius: 4px;
            border: none;
            background-color: #fecf13;
            color: #022169;
            cursor: pointer;
            height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #drawer-component .panel button:hover {
            background-color: #f0c00e;
        }

        @media (max-width: 375px) {
            #drawer-component .panel>* {
                padding: 0 16px 20px 16px;
            }
            #drawer-component .panel h2 {
                font-size: 24px;
                line-height: 32px;
                margin: 24px 0 12px 0;
            }
            #drawer-component .panel p {
                font-size: 14px;
                line-height: 20px;
            }
            #drawer-component .panel ul li,
            #drawer-component .panel ol li {
                font-size: 14px;
                line-height: 20px;
            }
        }

        #drawer-component .scroll-content-box::-webkit-scrollbar {
            width: 6px;
        }

        #drawer-component .scroll-content-box::-webkit-scrollbar-track {
            background: transparent;
        }

        #drawer-component .scroll-content-box::-webkit-scrollbar-thumb {
            background: #ededf2;
            border-radius: 1000px;
        }

        #drawer-component .scroll-content-box {
            max-height: 500px;
            overflow-y: auto;
            background: #f9f9f9;
            padding: 10px;
            border: 1px solid #ddd;
        }

        #drawer-component .panel {
            border: 0px solid transparent !important;
            border-radius: 0px !important;
        }

        /* ==========================================
           ENHANCEMENT: drawer swiper styles (scoped)
           ========================================== */
        #drawer-component .drawer-swiper-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #drawer-component .drawer-swiper-wrapper .swiper {
            width: 100%;
            border-radius: 0;
            overflow: hidden;
        }

        #drawer-component .drawer-swiper-wrapper .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Drawer swiper controls */
        #drawer-component .drawer-swiper-wrapper .carousel-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            padding: 0 32px;
        }

        #drawer-component .drawer-swiper-wrapper .nav-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 2px solid #ededf2;
            background: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.2s, border-color 0.2s, opacity 0.25s ease;
            padding: 0px !important;
        }

        #drawer-component .drawer-swiper-wrapper .nav-btn:hover {
            background: #f0f0f5;
        }

        #drawer-component .drawer-swiper-wrapper .nav-btn.disabled {
            opacity: 0.6;
            pointer-events: none;
            cursor: not-allowed;
        }

        #drawer-component .drawer-swiper-wrapper .nav-btn svg {
            width: 20px;
            height: 20px;
        }

        #drawer-component .drawer-swiper-wrapper .slide-counter {
            color: #022169;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0.2px;
            display: flex;
            gap: 4px;
            white-space: nowrap;
        }

        /* main page swiper (outside drawer) */
        #drawer-swiper.carousel-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #drawer-swiper .swiper {
            width: 100%;
            border-radius: 0;
            overflow: hidden;
        }

        #drawer-swiper .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        #drawer-swiper .carousel-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            padding: 0 32px;
        }

        #drawer-swiper .nav-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 2px solid #ededf2;
            background: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.2s, border-color 0.2s, opacity 0.25s ease;

        }

        #drawer-swiper .nav-btn:hover {
            background: #f0f0f5;
        }

        #drawer-swiper .nav-btn.disabled {
            opacity: 0.6;
            pointer-events: none;
            cursor: not-allowed;
        }

        #drawer-swiper .nav-btn svg {
            width: 20px !important;
            height: 20px !important;
        }

        #drawer-swiper .slide-counter {
            color: #022169;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0.2px;
            display: flex;
            gap: 4px;
            white-space: nowrap;
        }

        @media (min-width: 1441px) {

            .drawer-swiper-wrapper .carousel-controls {

                justify-content: flex-end !important;

            }

            .drawer-swiper-wrapper .carousel-controls {
                display: flex;
                align-items: center;
                /* Keeps buttons and counter vertically aligned */
            }

            /* Moves counter to the first position; buttons keep their relative order after it */
            .drawer-swiper-wrapper .slide-counter {
                order: -1;
            }

        }