/*
====================================================
WheelX Smart Search
Author: HR Digital Solutions
Version: 2.1
====================================================
*/

:root{

    --wheelx-red:#E30613;
    --wheelx-red-dark:#b7040f;

    --wheelx-bg:#111111;
    --wheelx-card:#1b1b1b;
    --wheelx-border:#323232;

    --wheelx-white:#ffffff;
    --wheelx-text:#e5e7eb;
    --wheelx-placeholder:#9ca3af;

    --wheelx-radius:12px;

    --wheelx-transition:.25s ease;

}

/* =====================================================
   Wrapper
===================================================== */

.wheelx-search-wrapper{

    max-width:1200px;

    margin:60px auto;

    padding:40px;

    background:var(--wheelx-bg);

    border-radius:20px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.35);

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

}

/* =====================================================
   Title
===================================================== */

.wheelx-search-title{

    color:#fff;

    text-align:center;

    font-size:34px;

    font-weight:700;

    margin-bottom:35px;

}

/* =====================================================
   Tabs
===================================================== */

.wheelx-tabs{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.wheelx-tab{

    border:none;

    background:#2b2b2b;

    color:#fff;

    border-radius:50px;

    padding:14px 30px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:var(--wheelx-transition);

}

.wheelx-tab:hover,
.wheelx-tab.active{

    background:var(--wheelx-red);

}

/* =====================================================
   Panels
===================================================== */

.wheelx-panel{

    display:none;

}

.wheelx-panel.active{

    display:block;

    animation:wheelxFade .25s ease;

}

@keyframes wheelxFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* =====================================================
   Labels
===================================================== */

.wheelx-panel label{

    display:block;

    margin-bottom:10px;

    color:var(--wheelx-text);

    font-size:15px;

    font-weight:600;

}

/* =====================================================
   Input
===================================================== */

.wheelx-input{

    width:100%;

    height:58px;

    border:2px solid var(--wheelx-border);

    border-radius:12px;

    background:#1d1d1d;

    color:#fff;

    padding:0 18px;

    font-size:16px;

    outline:none;

    transition:var(--wheelx-transition);

}

.wheelx-input::placeholder{

    color:var(--wheelx-placeholder);

}

.wheelx-input:focus{

    border-color:var(--wheelx-red);

    box-shadow:
        0 0 0 4px rgba(227,6,19,.15);

}




/* =====================================================
   Tom Select - WheelX Premium Theme
===================================================== */

.ts-wrapper{

    width:100%;

    margin-bottom:22px;

}

/* Remove default styles */

.ts-wrapper .ts-control{

    min-height:58px;

    background:#1d1d1d !important;

    border:2px solid var(--wheelx-border) !important;

    border-radius:12px !important;

    box-shadow:none !important;

    padding:14px 48px 14px 16px !important;

    transition:var(--wheelx-transition);

}

/* Remove double border */

.ts-wrapper.single .ts-control{

    background:#1d1d1d !important;

}

/* Focus */

.ts-wrapper.focus .ts-control{

    border-color:var(--wheelx-red) !important;

    box-shadow:
        0 0 0 4px rgba(227,6,19,.15) !important;

}

/* Text */

.ts-control{

    color:#fff !important;

    font-size:16px;

}

.ts-control>.item{

    color:#fff !important;

    font-weight:500;

}

/* Search Input */

.ts-control input{

    color:#fff !important;

    font-size:16px;

}

.ts-control input::placeholder{

    color:var(--wheelx-placeholder) !important;

}

/* Dropdown Arrow */

.ts-wrapper.single .ts-control:after{

    border-color:#ffffff transparent transparent transparent;

    right:18px;

}

.ts-wrapper.dropdown-active.single .ts-control:after{

    border-color:
        transparent
        transparent
        #ffffff
        transparent;

}

/* =====================================================
   Dropdown
===================================================== */

.ts-dropdown{

    margin-top:8px;

    background:#1d1d1d;

    border:2px solid var(--wheelx-border);

    border-radius:12px;

    overflow:hidden;

    box-shadow:

        0 15px 35px rgba(0,0,0,.35);

}

/* Scrollbar */

.ts-dropdown-content{

    max-height:260px;

}

.ts-dropdown-content::-webkit-scrollbar{

    width:8px;

}

.ts-dropdown-content::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:20px;

}

.ts-dropdown-content::-webkit-scrollbar-thumb:hover{

    background:var(--wheelx-red);

}

/* Options */

.ts-dropdown .option{

    padding:14px 18px;

    color:#ffffff;

    font-size:15px;

    transition:var(--wheelx-transition);

}

/* Hover */

.ts-dropdown .option:hover{

    background:var(--wheelx-red);

    color:#ffffff;

}

/* Active */

.ts-dropdown .active{

    background:var(--wheelx-red);

    color:#ffffff;

}

/* Selected */

.ts-dropdown .selected{

    background:#2b2b2b;

    color:#ffffff;

}

/* No Results */

.ts-dropdown .no-results{

    padding:16px;

    color:#bdbdbd;

}

/* Highlight */

.ts-dropdown .highlight{

    color:#ffcc00;

    font-weight:700;

}



/* =====================================================
   Better Spacing
===================================================== */

.ts-wrapper + .ts-wrapper{

    margin-top:18px;

}





/* =====================================================
   Search Button
===================================================== */

.wheelx-search-button{

    width:100%;

    height:60px;

    margin-top:10px;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        var(--wheelx-red),
        #c40510
    );

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:all .25s ease;

    letter-spacing:.4px;

}

.wheelx-search-button:hover{

    transform:translateY(-2px);

    background:linear-gradient(
        135deg,
        #f10816,
        var(--wheelx-red-dark)
    );

    box-shadow:
        0 12px 28px rgba(227,6,19,.35);

}

.wheelx-search-button:active{

    transform:scale(.98);

}

.wheelx-search-button:disabled{

    opacity:.75;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/* =====================================================
   Focus Accessibility
===================================================== */

.wheelx-search-button:focus-visible,
.wheelx-tab:focus-visible,
.wheelx-input:focus-visible,
.ts-control:focus{

    outline:none;

}

/* =====================================================
   Better Selection
===================================================== */

.wheelx-search-wrapper ::selection{

    background:var(--wheelx-red);

    color:#ffffff;

}

/* =====================================================
   Smooth Animation
===================================================== */

.wheelx-search-wrapper *,
.ts-wrapper *,
.ts-dropdown *{

    transition:

        background-color .25s ease,

        border-color .25s ease,

        color .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}

/* =====================================================
   Responsive
===================================================== */

@media (max-width:1024px){

    .wheelx-search-wrapper{

        margin:40px 20px;

        padding:32px;

    }

}

@media (max-width:768px){

    .wheelx-search-wrapper{

        padding:28px 20px;

    }

    .wheelx-search-title{

        font-size:28px;

        margin-bottom:28px;

    }

    .wheelx-tabs{

        gap:10px;

    }

    .wheelx-tab{

        flex:1;

        min-width:140px;

        padding:13px;

        font-size:15px;

    }

    .ts-wrapper .ts-control{

        min-height:56px;

        padding:13px 42px 13px 15px !important;

    }

    .wheelx-input{

        height:56px;

    }

}

@media (max-width:576px){

    .wheelx-search-wrapper{

        margin:18px 10px;

        padding:20px 15px;

        border-radius:16px;

    }

    .wheelx-search-title{

        font-size:22px;

        line-height:1.4;

        margin-bottom:20px;

    }

    .wheelx-tabs{

        flex-direction:column;

    }

    .wheelx-tab{

        width:100%;

        border-radius:10px;

    }

    .ts-wrapper{

        margin-bottom:16px;

    }

    .ts-wrapper .ts-control{

        min-height:52px;

        padding:11px 40px 11px 14px !important;

        font-size:15px;

    }

    .ts-control input{

        font-size:15px !important;

    }

    .wheelx-input{

        height:52px;

        font-size:15px;

    }

    .wheelx-search-button{

        height:54px;

        font-size:16px;

    }

}

/* =====================================================
   Utilities
===================================================== */

.wheelx-hidden{

    display:none !important;

}

.wheelx-error{

    color:#ff7070;

    font-size:14px;

    margin-top:8px;

}

.wheelx-success{

    color:#4ade80;

    font-size:14px;

    margin-top:8px;

}

/* =====================================================
   Future Ready
===================================================== */

.ts-dropdown .option{

    display:flex;

    align-items:center;

}

.ts-dropdown .option img{

    width:22px;

    height:22px;

    margin-right:10px;

    object-fit:contain;

}