/* ==========================================
   LOOK LOUNGE COMPONENTS
========================================== */

/* ========= Buttons ========= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 32px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

    border:none;

    font-size:15px;

}

.btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}

.btn-outline{

    background:transparent;

    color:var(--primary);

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

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/* ========= Cards ========= */

.card{

    background:var(--surface);

    border-radius:var(--radius-lg);

    padding:30px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

/* ========= Glass Effect ========= */

.glass{

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

}

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

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    display:inline-block;

    color:var(--primary);

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:12px;

}

.section-title h2{

    font-size:48px;

    margin-bottom:16px;

}

.section-title p{

    max-width:650px;

    margin:auto;

}

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

.badge{

    display:inline-block;

    padding:6px 14px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-size:13px;

    font-weight:600;

}

/* ========= Tag ========= */

.tag{

    display:inline-block;

    padding:8px 16px;

    border-radius:20px;

    background:#f5f5f5;

    font-size:14px;

}

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

.input{

    width:100%;

    padding:14px 18px;

    border-radius:12px;

    border:1px solid #ddd;

    transition:var(--transition);

}

.input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(212,160,23,.15);

}

/* ========= Product Card ========= */

.product-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.product-card img{

    width:100%;

    height:320px;

    object-fit:cover;

}

.product-content{

    padding:24px;

}

.product-content h3{

    margin-bottom:12px;

}

.price{

    display:flex;

    align-items:center;

    gap:10px;

    margin:18px 0;

    font-size:22px;

    font-weight:700;

    color:var(--primary);

}

.price del{

    color:#999;

    font-size:16px;

}

/* ========= Icon Box ========= */

.icon-box{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    font-size:24px;

}

/* ========= Divider ========= */

.divider{

    width:80px;

    height:4px;

    background:var(--primary);

    border-radius:20px;

    margin:20px auto;

}

/* ========= Loader ========= */

.loader{

    width:45px;

    height:45px;

    border:4px solid #eee;

    border-top:4px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}