/* ==========================================================
 *   ExotElectronics
 *   Sidebar Stylesheet
 *   File: /assets/css/sidebar.css
 *   ========================================================== */


/* ==========================================================
 *   Sidebar
 *   ========================================================== */

.sidebar{

    width:320px;

    flex-shrink:0;

    position:sticky;

    top:90px;

    align-self:flex-start;

}


/* ==========================================================
 *   Widget
 *   ========================================================== */

.sidebar-widget{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:24px;

    margin-bottom:24px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}


/* ==========================================================
 *   Widget Titles
 *   ========================================================== */

.sidebar-widget h3{

    margin:0 0 18px;

    font-size:1.15rem;

    font-weight:700;

    color:#111827;

    padding-bottom:12px;

    border-bottom:2px solid #f3f4f6;

}


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

.sidebar-widget form{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.sidebar-widget input[type="search"],
.sidebar-widget input[type="email"]{

    width:100%;

    padding:12px 15px;

    border:1px solid #d1d5db;

    border-radius:10px;

    font-size:.95rem;

    outline:none;

    transition:.25s;

}

.sidebar-widget input:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

.sidebar-widget button{

    border:none;

    border-radius:10px;

    padding:12px;

    background:#2563eb;

    color:#ffffff;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.sidebar-widget button:hover{

    background:#1d4ed8;

}


/* ==========================================================
 *   Navigation Menu
 *   ========================================================== */

.sidebar-menu{

    list-style:none;

    padding:0;

    margin:0;

}

.sidebar-menu li{

    margin-bottom:8px;

}

.sidebar-menu a{

    display:block;

    padding:12px 15px;

    border-radius:10px;

    color:#374151;

    text-decoration:none;

    transition:.25s;

    font-weight:500;

}

.sidebar-menu a:hover{

    background:#eff6ff;

    color:#2563eb;

    transform:translateX(5px);

}


/* ==========================================================
 *   Lists
 *   ========================================================== */

.sidebar-list{

    list-style:none;

    padding:0;

    margin:0;

}

.sidebar-list li{

    border-bottom:1px solid #f3f4f6;

}

.sidebar-list li:last-child{

    border-bottom:none;

}

.sidebar-list a{

    display:block;

    padding:12px 0;

    color:#4b5563;

    text-decoration:none;

    transition:.25s;

}

.sidebar-list a:hover{

    color:#2563eb;

    padding-left:8px;

}


/* ==========================================================
 *   Newsletter
 *   ========================================================== */

.sidebar-newsletter{

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#ffffff;

}

.sidebar-newsletter h3{

    color:#ffffff;

    border-bottom:1px solid rgba(255,255,255,.2);

}

.sidebar-newsletter p{

    margin-bottom:18px;

    line-height:1.6;

}

.sidebar-newsletter input{

    background:#ffffff;

}

.sidebar-newsletter button{

    background:#ffffff;

    color:#2563eb;

}

.sidebar-newsletter button:hover{

    background:#f3f4f6;

}


/* ==========================================================
 *   Active Link
 *   ========================================================== */

.sidebar-menu a.active{

    background:#2563eb;

    color:#ffffff;

}


/* ==========================================================
 *   Scrollbar
 *   ========================================================== */

.sidebar::-webkit-scrollbar{

    width:6px;

}

.sidebar::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;

}


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

@media (max-width:1100px){

    .sidebar{

        width:280px;

    }

}

@media (max-width:900px){

    .sidebar{

        width:100%;

        position:static;

        margin-bottom:40px;

    }

}

@media (max-width:768px){

    .sidebar-widget{

        padding:20px;

        margin-bottom:20px;

    }

}