/* ==========================================
   CYBERPANEL V2 - SERVICE.CSS
========================================== */

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

.service-search{

    margin:20px 0;

}

.service-search input{

    width:100%;

    height:58px;

    border:none;

    outline:none;

    border-radius:16px;

    padding:0 18px;

    background:#171717;

    color:#fff;

    font-size:15px;

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

    transition:.25s;

}

.service-search input:focus{

    border-color:#00ff9d;

    box-shadow:0 0 15px rgba(0,255,157,.15);

}

/* ===============================
   CATEGORY
================================ */

#category{

    width:100%;

    height:56px;

    margin:12px 0 25px;

    padding:0 18px;

    border-radius:15px;

    background:#171717;

    color:#fff;

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

    font-size:15px;

}

/* ===============================
   SERVICE GRID
================================ */

.service-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));

    gap:18px;

    margin-top:18px;

}

/* ===============================
   SERVICE CARD
================================ */

.service-card{

    background:#161616;

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

    border-radius:18px;

    padding:20px;

    cursor:pointer;

    transition:.25s;

}

.service-card:hover{

    transform:translateY(-4px);

    border-color:#00ff9d;

    box-shadow:

    0 10px 25px rgba(0,255,157,.12);

}

.service-card.active{

    border-color:#00ff9d;

    background:

    linear-gradient(

    180deg,

    rgba(0,255,157,.12),

    rgba(0,255,157,.03)

    );

}

/* ===============================
   SERVICE HEADER
================================ */

.service-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}

.service-id{

    font-size:13px;

    font-weight:700;

    color:#00ff9d;

}

.service-category{

    font-size:12px;

    color:#9ca3af;

}

/* ===============================
   TITLE
================================ */

.service-title{

    font-size:18px;

    color:#fff;

    font-weight:600;

    margin-bottom:10px;

    line-height:1.5;

}

/* ===============================
   DESCRIPTION
================================ */

.service-description{

    color:#b5b5b5;

    font-size:14px;

    line-height:1.7;

    margin-bottom:18px;

}

/* ===============================
   INFO
================================ */

.service-info{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}

.info-box{

    background:#202020;

    border-radius:12px;

    padding:10px;

}

.info-label{

    font-size:11px;

    color:#9ca3af;

    margin-bottom:5px;

}

.info-value{

    color:#fff;

    font-weight:600;

    font-size:14px;

}

/* ===============================
   PRICE
================================ */

.service-price{

    margin-top:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.price-text{

    color:#9ca3af;

    font-size:13px;

}

.price-value{

    color:#00ff9d;

    font-size:22px;

    font-weight:700;

}

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

.service-placeholder{

    width:100%;

    grid-column:1/-1;

    background:#181818;

    border:1px dashed rgba(255,255,255,.08);

    border-radius:18px;

    padding:40px;

    text-align:center;

    color:#888;

}

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

@media(max-width:768px){

.service-grid{

    grid-template-columns:1fr;

}

.service-card{

    padding:18px;

}

.service-title{

    font-size:17px;

}

.price-value{

    font-size:20px;

}

}

@media(max-width:430px){

.service-card{

    padding:16px;

}

.service-info{

    grid-template-columns:1fr;

}

.service-title{

    font-size:16px;

}

.price-value{

    font-size:18px;

}

}