/*======================================================
PREMIUM HERO
======================================================*/

.oas-hero{

background:linear-gradient(135deg,#162033,#1d2940);
border-radius:24px;
padding:18px 30px;
margin-bottom:45px;
position:relative;
overflow:hidden;
box-shadow:0 18px 45px rgba(15,23,42,.12);

}

/* Decorative Glow */

.oas-hero::before{

content:"";
position:absolute;
width:320px;
height:320px;
background:rgba(255,255,255,.04);
border-radius:50%;
right:-120px;
top:-120px;

}

.oas-hero::after{

content:"";
position:absolute;
width:150px;
height:150px;
background:rgba(255,255,255,.03);
left:-50px;
bottom:-50px;
border-radius:50%;

}

/*=========================
Top Badge
=========================*/

.hero-top{

display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:14px;
position:relative;
z-index:2;

}

.hero-badge{

background:linear-gradient(135deg,#ef4444,#f97316);
padding:8px 16px;
border-radius:40px;
color:#fff;
font-weight:700;
font-size:13px;

}

.hero-label{

padding:8px 16px;
border-radius:40px;
background:rgba(255,255,255,.08);
color:#ffb86b;
font-size:12px;
font-weight:700;
letter-spacing:.8px;

}

/*=========================
Layout
=========================*/

.hero-wrapper{

display:grid;
grid-template-columns:2fr 330px;
gap:35px;
align-items:center;
position:relative;
z-index:2;

}

/*=========================
Left
=========================*/

.hero-content h1{

font-size:30px;
line-height:1.15;
font-weight:800;
color:#fff;
margin-bottom:12px;

}

.hero-content h1 span{

color:#fbbf24;

}

.hero-content p{

font-size:15px;
line-height:1.7;
color:#cbd5e1;
margin-bottom:8px;
max-width:640px;

}

/*=========================
Features
=========================*/

.hero-features{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin:18px 0;
max-width:620px;

}

.hero-features div{

background:rgba(255,255,255,.06);
padding:10px 14px;
border-radius:14px;
color:#fff;
font-weight:600;
font-size:14px;

}

.hero-features i{

color:#fbbf24;
margin-right:8px;

}

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

.hero-btn{

display:inline-flex;
align-items:center;
gap:10px;
background:#fff;
color:#1d4ed8;
padding:12px 24px;
border-radius:40px;
text-decoration:none;
font-weight:700;
font-size:15px;
transition:.3s;

}

.hero-btn:hover{

transform:translateY(-3px);
box-shadow:0 15px 30px rgba(0,0,0,.2);

}

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

.hero-sidebar{

background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(12px);
border-radius:20px;
padding:18px;

}

.featured-tag{

display:inline-block;
background:#ef4444;
color:#fff;
padding:5px 12px;
border-radius:8px;
font-size:11px;
font-weight:700;
margin-bottom:12px;

}

.hero-sidebar h3{

color:#fff;
font-size:22px;
margin-bottom:6px;

}

.hero-sidebar h4{

color:#fbbf24;
font-size:17px;
line-height:1.45;
margin-bottom:16px;

}

.hero-meta{

display:grid;
gap:8px;
margin-bottom:16px;

}

.hero-meta span{

background:rgba(255,255,255,.06);
padding:9px 12px;
border-radius:10px;
color:#dbeafe;
font-size:13px;

}

.hero-meta i{

width:18px;
color:#fbbf24;

}

.sidebar-btn{

display:block;
text-align:center;
background:#fff;
color:#1d4ed8;
padding:12px;
border-radius:12px;
text-decoration:none;
font-weight:700;
font-size:15px;
transition:.3s;

}

.sidebar-btn:hover{

background:#f8fafc;

}

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

@media(max-width:992px){

.hero-wrapper{

grid-template-columns:1fr;

}

.hero-content h1{

font-size:34px;

}

.hero-features{

grid-template-columns:1fr;

}

.hero-sidebar{

margin-top:20px;

}

}

@media(max-width:576px){

.oas-hero{

padding:18px;

}

.hero-content h1{

font-size:26px;

}

.hero-content p{

font-size:14px;

}

.hero-btn{

width:100%;
justify-content:center;

}

.hero-wrapper{

gap:20px;

}

}



/*=========================================
FILTER BAR
=========================================*/

.practice-filter-wrap{

margin:35px 0 18px;

background:#fff;

border:1px solid #e5e7eb;

border-radius:20px;

padding:22px 26px;

box-shadow:0 10px 25px rgba(15,23,42,.06);

}

.practice-filter{

display:grid;

grid-template-columns:180px 220px 1fr;

gap:20px;

align-items:end;

}

/*=========================================
LABELS
=========================================*/

.filter-item label,
.filter-search label{

display:block;

margin-bottom:8px;

font-size:12px;

font-weight:700;

letter-spacing:1px;

color:#2563eb;

}

/*=========================================
SELECT
=========================================*/

.filter-item select{

width:100%;

height:52px;

padding:0 16px;

border:1px solid #dbeafe;

border-radius:12px;

background:#fff;

font-size:15px;

font-weight:600;

color:#1e293b;

outline:none;

transition:.25s;

}

.filter-item select:focus{

border-color:#2563eb;

box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

/*=========================================
SEARCH
=========================================*/

.search-box{

display:flex;

align-items:center;

height:52px;

padding:0 16px;

border:1px solid #dbeafe;

border-radius:12px;

background:#fff;

transition:.25s;

}

.search-box:focus-within{

border-color:#2563eb;

box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.search-box i{

font-size:17px;

color:#2563eb;

margin-right:12px;

}

.search-box input{

flex:1;

border:none;

outline:none;

font-size:15px;

color:#1e293b;

background:none;

}

.search-box input::placeholder{

color:#94a3b8;

}

/*=========================================
RESULT BAR
=========================================*/

.practice-result-bar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

padding:0 5px;

}

.practice-result-bar h4{

margin:0;

font-size:18px;

font-weight:700;

color:#0f172a;

}

.practice-result-bar span{

color:#2563eb;

font-size:24px;

font-weight:800;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:992px){

.practice-filter{

grid-template-columns:1fr;

}

}

@media(max-width:576px){

.practice-filter-wrap{

padding:18px;

}

.practice-result-bar h4{

font-size:16px;

}

.practice-result-bar span{

font-size:20px;

}

}



/*==================================
Practice List
==================================*/

.practice-list{

    display:flex;
    flex-direction:column;
    gap:14px;
    margin:18px 0 50px;

}

/*==================================
Practice Card
==================================*/

.practice-card{

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

    background:#fff;

    padding:16px 22px;

    border:1px solid #e8edf5;
    border-radius:16px;

    box-shadow:0 8px 24px rgba(15,23,42,.05);

    transition:all .28s ease;

    overflow:hidden;

}

.practice-card:hover{

    transform:translateY(-3px);

    border-color:#bfdbfe;

    box-shadow:0 16px 40px rgba(37,99,235,.12);

}

.practice-left{

    display:flex;
    align-items:center;
    gap:18px;
    flex:1;

}

/*==================================
Day Badge
==================================*/

.practice-day{

    width:68px;
    height:68px;

    border-radius:14px;

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

    color:#fff;

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

    flex-shrink:0;

    box-shadow:0 10px 25px rgba(37,99,235,.25);

}

.practice-day span{

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:1px;

    opacity:.9;

}

.practice-day strong{

    font-size:24px;

    font-weight:800;

    line-height:1;

}

/*==================================
Content
==================================*/

.practice-content{

    flex:1;

}

.practice-content h3{

    margin:0 0 6px;

    font-size:21px;

    font-weight:700;

    color:#0f172a;

    line-height:1.35;

}

.practice-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

    font-size:13px;

    color:#64748b;

}

.practice-meta span{

    display:flex;

    align-items:center;

}

.practice-meta i{

    color:#2563eb;

    margin-right:6px;

    font-size:13px;

}

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

.practice-btn{

    min-width:145px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

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

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.25s;

}

.practice-btn:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(37,99,235,.30);

}

/*==================================
Empty
==================================*/

.empty-practice{

    padding:60px 25px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    text-align:center;

}

.empty-practice i{

    font-size:52px;

    color:#94a3b8;

    margin-bottom:16px;

}

.empty-practice h3{

    margin-bottom:8px;

    font-size:24px;

    color:#0f172a;

}

.empty-practice p{

    color:#64748b;

}

/*==================================
Filter Animation
==================================*/

.practice-card{

    opacity:1;

    transform:translateY(0);

}

.practice-card.show{

    opacity:1;

    transform:translateY(0);

}

.practice-card.hide{

    opacity:0;

    transform:translateY(12px);

    pointer-events:none;

}

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

@media(max-width:768px){

.practice-card{

    flex-direction:column;

    align-items:flex-start;

    gap:16px;

    padding:16px;

}

.practice-left{

    width:100%;

}

.practice-btn{

    width:100%;

}

.practice-content h3{

    font-size:18px;

}

.practice-day{

    width:58px;

    height:58px;

}

.practice-day strong{

    font-size:20px;

}

}