/* =========================================================
   QUALITELL QUICK SOURCING
========================================================= */

#qt-sourcing-root,
#qt-sourcing-root *{
    box-sizing:border-box;
    font-family:"Montserrat-Light","Montserrat",Arial,sans-serif;
    font-weight:300;
}

#qt-sourcing-root{
    --qt-blue:#0759ff;
    --qt-hover:#0b73e2;
    --qt-dark:#080b12;
    --qt-text:#111;
    --qt-muted:#666;
    --qt-line:#e6e6e8;
}


/* =========================================================
   LEFT FIXED TAB
========================================================= */

#qt-sourcing-tab{
    position:fixed;
    left:0;
    top:50%;
    transform:translateY(-50%);

    width:76px;
    min-height:190px;
    padding:20px 7px 16px;

    background:#080b12;
    color:#fff;

    border-radius:0 10px 10px 0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    z-index:999998;

    box-shadow:8px 10px 30px rgba(0,0,0,.22);

    transition:
        background .25s ease,
        box-shadow .25s ease;
}


/* Hover */

#qt-sourcing-tab:hover{
    background:#0b73e2;

    box-shadow:
        9px 12px 34px rgba(11,115,226,.30);
}


.qt-tab-title{
    width:100%;

    text-align:center;

    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;

    transform:none !important;

    font-size:12px;
    line-height:1.35;

    letter-spacing:0;

    color:#fff;
}


.qt-tab-sourcing{
    display:block;

    width:100%;

    white-space:nowrap;

    color:#fff;
}


/* =========================================================
   TAB ARROW
========================================================= */

.qt-tab-arrow{
    width:22px;
    height:22px;

    margin-top:22px;

    display:flex;
    align-items:center;
    justify-content:center;
}


.qt-tab-arrow svg{
    display:block;

    width:22px;
    height:22px;

    transition:transform .25s ease;
}


.qt-tab-arrow svg path{
    fill:#fff !important;
}


#qt-sourcing-tab:hover .qt-tab-arrow svg{
    transform:translateX(3px);
}


/* =========================================================
   OVERLAY
========================================================= */

#qt-sourcing-overlay{
    position:fixed;

    inset:0;

    background:rgba(0,0,0,.34);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    z-index:999996;
}


#qt-sourcing-root.qt-open #qt-sourcing-overlay{
    opacity:1;
    visibility:visible;
}


/* =========================================================
   DRAWER
========================================================= */

#qt-sourcing-drawer{
    position:fixed;

    left:0;
    top:0;

    width:500px;
    max-width:92vw;

    height:100vh;
    height:100dvh;

    background:#fff;

    transform:translateX(-105%);

    transition:
        transform .38s cubic-bezier(.22,.8,.25,1);

    z-index:999999;

    box-shadow:
        18px 0 50px rgba(0,0,0,.16);

    display:flex;
    flex-direction:column;
}


#qt-sourcing-root.qt-open #qt-sourcing-drawer{
    transform:translateX(0);
}


/* =========================================================
   HEADER
========================================================= */

.qt-drawer-head{
    position:relative;

    padding:21px 28px 19px;

    color:#fff;

    background:
        linear-gradient(
            120deg,
            #04070d 0%,
            #050a14 46%,
            #061126 100%
        );

    overflow:hidden;

    isolation:isolate;
}


.qt-drawer-head > *{
    position:relative;
    z-index:5;
}


/* =========================================================
   MOVING BLUE GLOW 01
========================================================= */

.qt-drawer-head::before{
    content:"";

    position:absolute;

    width:310px;
    height:310px;

    left:-135px;
    top:-25px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(27,111,255,.50) 0%,
            rgba(22,101,255,.34) 22%,
            rgba(15,82,225,.19) 43%,
            rgba(8,58,180,.08) 60%,
            rgba(0,0,0,0) 76%
        );

    filter:blur(22px);

    pointer-events:none;

    z-index:1;

    animation:
        qtGlowOne 9s ease-in-out infinite alternate;
}


/* =========================================================
   MOVING BLUE GLOW 02
========================================================= */

.qt-drawer-head::after{
    content:"";

    position:absolute;

    width:340px;
    height:340px;

    right:-150px;
    top:-95px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(39,126,255,.48) 0%,
            rgba(27,108,255,.30) 25%,
            rgba(16,82,220,.17) 46%,
            rgba(8,55,165,.07) 63%,
            rgba(0,0,0,0) 78%
        );

    filter:blur(25px);

    pointer-events:none;

    z-index:1;

    animation:
        qtGlowTwo 12s ease-in-out infinite alternate;
}


/* =========================================================
   MOVING BLUE GLOW 03
========================================================= */

.qt-glow-extra{
    position:absolute !important;

    width:240px;
    height:240px;

    left:34%;
    bottom:-145px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(64,149,255,.48) 0%,
            rgba(36,121,255,.28) 27%,
            rgba(20,91,225,.15) 48%,
            rgba(10,65,180,.06) 64%,
            rgba(0,0,0,0) 76%
        );

    filter:blur(20px);

    pointer-events:none;

    z-index:1 !important;

    animation:
        qtGlowThree 10s ease-in-out infinite alternate;
}


@keyframes qtGlowOne{

    0%{
        transform:
            translate3d(-20px,-10px,0)
            scale(.92);

        opacity:.72;
    }

    50%{
        transform:
            translate3d(115px,15px,0)
            scale(1.08);

        opacity:1;
    }

    100%{
        transform:
            translate3d(225px,-5px,0)
            scale(.96);

        opacity:.82;
    }

}


@keyframes qtGlowTwo{

    0%{
        transform:
            translate3d(25px,-5px,0)
            scale(.94);

        opacity:.75;
    }

    50%{
        transform:
            translate3d(-115px,45px,0)
            scale(1.10);

        opacity:1;
    }

    100%{
        transform:
            translate3d(-215px,5px,0)
            scale(.93);

        opacity:.80;
    }

}


@keyframes qtGlowThree{

    0%{
        transform:
            translate3d(-75px,0,0)
            scale(.88);

        opacity:.62;
    }

    50%{
        transform:
            translate3d(40px,-70px,0)
            scale(1.13);

        opacity:.96;
    }

    100%{
        transform:
            translate3d(135px,-15px,0)
            scale(.94);

        opacity:.70;
    }

}


/* =========================================================
   HEADER CONTENT
========================================================= */

.qt-logo{
    margin-bottom:16px;

    font-size:21px;
    line-height:1.2;

    color:#fff;
}


.qt-sourcing-label{
    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:7px;

    font-size:14px;
    line-height:1.3;

    letter-spacing:.4px;

    color:#a8c9ff;
}


.qt-sourcing-dot{
    width:8px;
    height:8px;

    flex:0 0 8px;

    border-radius:50%;

    background:#4c9aff;

    box-shadow:
        0 0 6px rgba(76,154,255,.9),
        0 0 16px rgba(76,154,255,.45);
}


.qt-drawer-head h2{
    margin:0;

    font-size:27px;
    line-height:1.22;

    color:#fff;

    text-shadow:
        0 1px 2px rgba(0,0,0,.18);
}


.qt-drawer-head p{
    max-width:430px;

    margin:9px 0 0;

    font-size:14px;
    line-height:1.5;

    color:rgba(255,255,255,.74);
}


/* =========================================================
   CLOSE BUTTON
   FULL 44 × 44 CLICK AREA
========================================================= */

.qt-close{
    position:absolute !important;

    top:9px;
    right:14px;

    width:44px !important;
    height:44px !important;

    min-width:44px !important;
    min-height:44px !important;

    padding:0 !important;
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:50% !important;

    background:transparent !important;

    color:#fff !important;

    cursor:pointer !important;

    z-index:50 !important;

    appearance:none;
    -webkit-appearance:none;

    outline:none;

    line-height:1 !important;
}


.qt-close::before{
    content:"";

    position:absolute;

    inset:4px;

    border:
        1px solid rgba(255,255,255,.22);

    border-radius:50%;

    background:
        rgba(255,255,255,.06);

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.qt-close span{
    position:relative;

    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    font-size:21px;
    line-height:1;

    color:#fff;

    pointer-events:none;
}


.qt-close:hover::before{
    background:
        rgba(255,255,255,.14);

    border-color:
        rgba(255,255,255,.42);

    transform:scale(1.04);
}


/* =========================================================
   BODY
========================================================= */

.qt-drawer-body{
    flex:1;

    overflow-y:auto;
    overflow-x:hidden;

    padding:18px 24px 18px;

    -webkit-overflow-scrolling:touch;
}


.qt-drawer-body::-webkit-scrollbar{
    width:4px;
}


.qt-drawer-body::-webkit-scrollbar-track{
    background:transparent;
}


.qt-drawer-body::-webkit-scrollbar-thumb{
    background:#d5d5d8;

    border-radius:10px;
}


/* =========================================================
   QUICK SOURCING
========================================================= */

.qt-section-title{
    margin-bottom:10px;

    font-size:16px;
    line-height:1.4;

    color:#111;
}


.qt-actions{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:10px;

    margin-bottom:14px;
}


/* =========================================================
   ACTION CARD
========================================================= */

.qt-action{
    display:block;

    min-height:124px;

    padding:14px 15px;

    border:
        1px solid #e8e8eb;

    border-radius:6px;

    background:#fff;

    color:#111;

    text-decoration:none;

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.qt-action:hover{
    border-color:#a8c8ff;

    transform:translateY(-2px);

    box-shadow:
        0 8px 24px rgba(0,70,180,.08);
}


.qt-action-icon{
    width:25px;
    height:25px;

    margin-bottom:9px;

    display:flex;
    align-items:center;
}


.qt-action-icon svg{
    display:block;

    width:25px;
    height:25px;

    transition:transform .2s ease;
}


.qt-action-icon svg path{
    fill:#0759ff !important;
}


.qt-action:hover .qt-action-icon svg{
    transform:translateY(-2px);
}


.qt-action-title{
    margin-bottom:4px;

    font-size:15px;
    line-height:1.35;

    color:#111;
}


.qt-action-desc{
    font-size:13px;
    line-height:1.4;

    color:#666;
}


/* =========================================================
   GET A QUOTE — PRIORITY CARD
========================================================= */

.qt-action--quote{
    border-color:#bcd6ff;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 55%,
            #f5f9ff 100%
        );

    box-shadow:
        inset 0 0 0 1px rgba(7,89,255,.025);
}


.qt-action--quote .qt-action-title{
    color:#0759ff;

    font-weight:500;
}


.qt-action--quote:hover{
    border-color:#0759ff;

    background:#f1f7ff;

    box-shadow:
        0 9px 26px rgba(7,89,255,.12);
}


/* =========================================================
   STAGGER ENTRANCE ANIMATION
========================================================= */

.qt-animate{
    opacity:0;

    transform:translateY(10px);

    transition:
        opacity .35s ease,
        transform .35s ease;
}


/* 打开以后依次显示 */

#qt-sourcing-root.qt-open .qt-animate{
    opacity:1;

    transform:translateY(0);
}


#qt-sourcing-root.qt-open
.qt-animate:nth-child(1){
    transition-delay:.08s;
}


#qt-sourcing-root.qt-open
.qt-animate:nth-child(2){
    transition-delay:.12s;
}


#qt-sourcing-root.qt-open
.qt-animate:nth-child(3){
    transition-delay:.16s;
}


#qt-sourcing-root.qt-open
.qt-animate:nth-child(4){
    transition-delay:.20s;
}


/* =========================================================
   EXHIBITIONS
========================================================= */

.qt-exhibitions{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:10px;
}


/* 只剩一个展会时自动变成整行 */

.qt-exhibitions.qt-single{
    grid-template-columns:1fr;
}


.qt-exhibitions.qt-single .qt-fair{
    width:100%;
}


.qt-fair{
    position:relative;

    overflow:hidden;

    height:181px;

    padding:16px 18px;

    border-radius:6px;

    color:#fff;

    background:
        linear-gradient(
            120deg,
            #08204a,
            #0751d3
        );

    display:flex;
    flex-direction:column;

    opacity:0;

    transform:translateY(10px);

    transition:
        opacity .38s ease,
        transform .38s ease;
}


#qt-sourcing-root.qt-open
.qt-fair{
    opacity:1;

    transform:translateY(0);
}


#qt-sourcing-root.qt-open
.qt-fair:nth-child(1){
    transition-delay:.25s;
}


#qt-sourcing-root.qt-open
.qt-fair:nth-child(2){
    transition-delay:.30s;
}


.qt-fair::before{
    content:"";

    position:absolute;

    width:150px;
    height:150px;

    right:-90px;
    bottom:-105px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:50%;
}


.qt-fair::after{
    content:"";

    position:absolute;

    width:130px;
    height:130px;

    right:-70px;
    top:-70px;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:50%;
}


.qt-fair-small{
    position:relative;

    z-index:2;

    margin-bottom:5px;

    font-size:11px;
    line-height:1.35;

    color:#a8cbff;

    letter-spacing:.5px;
}


.qt-fair h3{
    position:relative;

    z-index:2;

    margin:0;

    font-size:17px;
    line-height:1.3;

    color:#fff;
}


.qt-fair-date{
    position:relative;

    z-index:2;

    margin-top:5px;

    font-size:12px;
    line-height:1.4;

    color:
        rgba(255,255,255,.76);
}


/* =========================================================
   HONG KONG BUTTON
========================================================= */

.qt-fair-btns{
    position:relative;

    z-index:2;

    display:flex;

    margin-top:auto;
}


.qt-fair-btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:34px;

    padding:0 13px;

    border-radius:5px;

    font-size:11px;
    line-height:1.3;

    text-decoration:none;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.qt-fair-btn.primary{
    background:#fff;

    color:#0751d3;

    border:1px solid #fff;
}


.qt-fair-btn.primary:hover{
    background:#f2f6ff;

    color:#0751d3;

    transform:translateY(-1px);
}


/* =========================================================
   CES 2027
========================================================= */

.qt-fair--ces{
    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(72,150,255,.30),
            transparent 45%
        ),

        linear-gradient(
            125deg,
            #071b3e 0%,
            #07398f 55%,
            #0759ff 100%
        );
}


/* =========================================================
   CES BOOTH — FIXED LOWER LEFT
========================================================= */

.qt-ces-booth{
    position:relative;

    z-index:2;

    display:flex;
    align-items:center;

    align-self:flex-start;

    gap:8px;

    margin-top:auto;

    min-height:34px;

    padding:0 12px;

    border:
        1px solid rgba(255,255,255,.42);

    border-radius:5px;

    background:
        rgba(255,255,255,.08);

    color:#fff;
}


.qt-ces-booth-label{
    font-size:10px;
    line-height:1;

    letter-spacing:1px;

    color:
        rgba(255,255,255,.72);
}


.qt-ces-booth strong{
    font-size:14px;
    line-height:1;

    font-weight:500;

    color:#fff;
}


/* =========================================================
   FOOTER
========================================================= */

.qt-drawer-foot{
    padding-top:11px;

    text-align:center;

    color:#888;

    font-size:11px;
    line-height:1.4;
}


/* =========================================================
   MOBILE
   ≤600px COMPLETELY DISABLED
========================================================= */

@media(max-width:600px){

    #qt-sourcing-root{
        display:none !important;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    #qt-sourcing-drawer,
    #qt-sourcing-overlay,
    .qt-action,
    .qt-fair,
    .qt-animate,
    .qt-drawer-head::before,
    .qt-drawer-head::after,
    .qt-glow-extra{

        transition:none !important;
        animation:none !important;

    }


    .qt-action,
    .qt-fair,
    .qt-animate{

        opacity:1 !important;
        transform:none !important;

    }

}