/*==============================================================
    GENIUNE.PK
    COMPONENTS.CSS
==============================================================*/


/*==============================================================
    BUTTON COMPONENTS
==============================================================*/

.btn{

    border-radius:14px;

    font-weight:600;

    transition:.35s;

}

.btn:hover{

    transform:translateY(-3px);

}

.btn-primary{

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    border:none;

}

.btn-success{

    background:linear-gradient(135deg,#16a34a,#22c55e);

    border:none;

}

.btn-warning{

    background:linear-gradient(135deg,#f59e0b,#fbbf24);

    border:none;

}

.btn-danger{

    background:linear-gradient(135deg,#dc2626,#ef4444);

    border:none;

}


/*==============================================================
    PRODUCT CARD
==============================================================*/

.product-card{

    background:white;

    border-radius:20px;

    padding:25px;

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

    transition:.35s;

    border:1px solid #eef2ff;

}

.product-card:hover{

    transform:translateY(-5px);

}

.product-card h4{

    font-size:22px;

    font-weight:700;

    margin-bottom:10px;

}

.product-card p{

    color:#64748b;

    margin:0;

}


/*==============================================================
    MANUFACTURER CARD
==============================================================*/

.manufacturer-card{

    display:flex;

    align-items:center;

    gap:20px;

    background:white;

    padding:20px;

    border-radius:18px;

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

}

.manufacturer-logo{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#eff6ff;

    display:flex;

    align-items:center;

    justify-content:center;

}

.manufacturer-logo img{

    width:45px;

}

.manufacturer-info h5{

    margin:0;

    font-weight:700;

}

.manufacturer-info p{

    margin:3px 0 0;

    color:#64748b;

}


/*==============================================================
    STATUS CARD
==============================================================*/

.status-card{

    border-radius:20px;

    padding:25px;

    color:white;

    position:relative;

    overflow:hidden;

}

.status-card h3{

    font-size:30px;

    font-weight:700;

}

.status-card p{

    margin:8px 0 0;

}

.status-success{

    background:linear-gradient(135deg,#16a34a,#22c55e);

}

.status-warning{

    background:linear-gradient(135deg,#f59e0b,#fbbf24);

}

.status-danger{

    background:linear-gradient(135deg,#dc2626,#ef4444);

}

.status-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

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

    right:-60px;

    top:-60px;

}


/*==============================================================
    WARRANTY CARD
==============================================================*/

.warranty-card{

    background:white;

    border-radius:20px;

    padding:22px;

    border-left:5px solid #16a34a;

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

}

.warranty-card h5{

    margin-bottom:12px;

    font-weight:700;

}

.warranty-card span{

    color:#64748b;

}


/*==============================================================
    REPORT CARD
==============================================================*/

.report-card{

    background:white;

    border-radius:20px;

    padding:22px;

    border-left:5px solid #f59e0b;

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

}

.report-card h5{

    font-weight:700;

}

.report-card p{

    color:#64748b;

}


/*==============================================================
    EMPTY STATE
==============================================================*/

.empty-state{

    text-align:center;

    padding:70px 20px;

}

.empty-state img{

    width:170px;

    margin:auto;

    margin-bottom:30px;

}

.empty-state h3{

    font-weight:700;

}

.empty-state p{

    color:#64748b;

}


/*==============================================================
    INFORMATION LIST
==============================================================*/

.info-list{

    list-style:none;

    margin:0;

    padding:0;

}

.info-list li{

    display:flex;

    justify-content:space-between;

    padding:15px 0;

    border-bottom:1px solid #eef2ff;

}

.info-list li:last-child{

    border:none;

}

.info-list span{

    color:#64748b;

}

.info-list strong{

    color:#0f172a;

}


/*==============================================================
    TIMELINE
==============================================================*/

.timeline{

    position:relative;

    margin-left:20px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:9px;

    top:0;

    width:2px;

    height:100%;

    background:#dbeafe;

}

.timeline-item{

    position:relative;

    padding-left:35px;

    margin-bottom:30px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#2563eb;

    left:0;

    top:4px;

}

.timeline-item h6{

    margin-bottom:5px;

    font-weight:700;

}

.timeline-item p{

    color:#64748b;

    margin:0;

}


/*==============================================================
    QR SCANNER CARD
==============================================================*/

.scanner-card{

    background:white;

    border:2px dashed #cbd5e1;

    border-radius:22px;

    padding:30px;

    text-align:center;

}

.scanner-card i{

    font-size:65px;

    color:#2563eb;

}

.scanner-card h5{

    margin-top:20px;

    font-weight:700;

}

.scanner-card p{

    color:#64748b;

}


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

.modal-header{

    border:none;

    padding-bottom:0;

}

.modal-title{

    font-weight:700;

}

.modal-content{

    border:none;

    border-radius:22px;

}