/* =====================================================
   DARK-PLAY NETWORK
   WHMCS STORE DESIGN
   ===================================================== */


/* =====================================
   STORE WRAPPER
===================================== */

.dp-store-wrap{
    padding:20px 0 40px;
}


/* =====================================
   STORE CARD
===================================== */

.dp-store-wrap .dp-card{
    background:linear-gradient(180deg,#0b1220,#070d19);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
    padding:22px;
}


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

.dp-store-wrap .dp-grid{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:20px;
}

@media(max-width:900px){

.dp-store-wrap .dp-grid{
grid-template-columns:1fr;
}

}


/* =====================================
   TITLES
===================================== */

.dp-store-wrap .dp-title{
    color:#ffffff;
    font-weight:900;
    margin:0 0 8px 0;
    letter-spacing:.2px;
}

.dp-store-wrap .dp-desc{
    color:rgba(255,255,255,.75);
    line-height:1.55;
}


/* =====================================
   BOXES
===================================== */

.dp-store-wrap .dp-box{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:16px;
}

.dp-store-wrap .dp-box h4{

    color:rgba(255,255,255,.9);
    font-weight:900;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.45px;
    margin:0 0 10px 0;

}


/* =====================================
   INPUTS
===================================== */

.dp-store-wrap .dp-input input,
.dp-store-wrap .dp-input select{

    background:#050a14 !important;
    border:1px solid rgba(255,255,255,.12) !important;
    color:#ffffff !important;
    border-radius:12px !important;
    height:45px;

}

.dp-store-wrap .dp-input input:focus,
.dp-store-wrap .dp-input select:focus{

    border-color:#3b82f6 !important;
    box-shadow:0 0 0 3px rgba(59,130,246,.20) !important;

}


/* =====================================
   DOMAIN STATUS
===================================== */

.dp-store-wrap .dp-domain-status{

    margin-top:10px;
    font-weight:900;
    font-size:13px;
    color:rgba(255,255,255,.70);

}

.dp-store-wrap .dp-domain-status.ok{

    color:#22c55e;

}

.dp-store-wrap .dp-domain-status.bad{

    color:#ef4444;

}


/* =====================================
   TABS
===================================== */

.dp-store-wrap .dp-tabs{

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

}

.dp-store-wrap .dp-tabs li a{

    color:rgba(255,255,255,.72) !important;
    font-weight:900;
    border:none !important;
    background:transparent !important;
    border-radius:12px 12px 0 0;

}

.dp-store-wrap .dp-tabs li.active a,
.dp-store-wrap .dp-tabs li a:hover{

    color:#ffffff !important;
    background:rgba(59,130,246,.12) !important;

}


/* =====================================
   TAB CONTENT
===================================== */

.dp-store-wrap .dp-tabcontent{

    padding:14px;
    border:1px solid rgba(255,255,255,.08);
    border-top:none;
    border-radius:0 0 16px 16px;
    background:rgba(0,0,0,.18);

}


/* =====================================
   BUTTONS
===================================== */

.dp-store-wrap .dp-actions{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;

}

.dp-store-wrap .dp-actions .right{

    display:flex;
    gap:10px;
    margin-left:auto;

}

.dp-store-wrap .dp-btn{

    border-radius:12px !important;
    font-weight:900 !important;
    padding:10px 18px !important;

}


/* default button */

.dp-store-wrap .btn-default.dp-btn{

    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:#ffffff !important;

}

.dp-store-wrap .btn-default.dp-btn:hover{

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

}


/* primary button */

.dp-store-wrap .btn-primary.dp-btn{

    background:linear-gradient(90deg,#1e3a8a,#2563eb) !important;
    border:none !important;

}

.dp-store-wrap .btn-primary.dp-btn:disabled{

    opacity:.55;
    cursor:not-allowed;

}


/* =====================================
   IMPORTANT
   =====================================

   NU modific?m:

   .container
   .panel
   section
   body

   pentru c? WHMCS store are layout intern
   ?i apar "cutii albe".

===================================== */