:root{
    --sp-bg:#0d0f14;
    --sp-bg2:#11141a;
    --sp-card:#171a21;
    --sp-card2:#1c2028;
    --sp-border:#2b3039;
    --sp-orange:#ff6424;
    --sp-orange2:#ff8049;
    --sp-white:#fff;
    --sp-text:#d8dde6;
    --sp-muted:#929baa;
    --sp-green:#38d392;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
    background:var(--sp-bg)!important;
    color:var(--sp-text)!important;
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden;
}

a{
    text-decoration:none!important;
}

.sp-container{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;
}

/* TOP */

.sp-topbar{
    background:#08090c;
    border-bottom:1px solid #20242b;
    color:#c8ced8;
    font-size:12px;
}

.sp-topbar .sp-container{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.sp-top-news span{
    display:inline-block;
    width:8px;
    height:8px;
    margin-right:8px;
    border-radius:50%;
    background:var(--sp-orange);
}

.sp-top-links{
    display:flex;
    gap:18px;
}

.sp-top-links a{
    color:#fff!important;
}

/* HEADER */

.sp-header{
    background:#101319;
    border-bottom:1px solid #282c34;
}

.sp-header-row{
    min-height:76px;
    display:flex;
    align-items:center;
    gap:38px;
}

.sp-logo{
    display:flex!important;
    align-items:center;
    gap:11px;
    flex-shrink:0;
}

.sp-logo-mark{
    width:42px;
    height:42px;
    border-radius:11px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:3px;
    padding:9px;
    background:linear-gradient(135deg,#ff7c35,#ff5018);
    box-shadow:0 7px 22px rgba(255,100,36,.25);
}

.sp-logo-mark i{
    display:block;
    width:5px;
    background:#fff;
    border-radius:4px;
}

.sp-logo-mark i:nth-child(1){height:13px}
.sp-logo-mark i:nth-child(2){height:22px}
.sp-logo-mark i:nth-child(3){height:17px}

.sp-logo-name{
    color:#fff;
    font-size:27px;
    font-weight:900;
    letter-spacing:-1px;
}

.sp-logo-name span{
    color:var(--sp-orange);
}

.sp-nav{
    display:flex;
    gap:27px;
    flex:1;
}

.sp-nav a,
.sp-account a{
    color:#fff!important;
    font-size:14px;
    font-weight:700;
}

.sp-nav a:hover,
.sp-account a:hover{
    color:var(--sp-orange)!important;
}

/* MAIN */

.sp-main{
    background:var(--sp-bg);
    min-height:600px;
}

.sp-page-shell{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:25px 20px;
}

/* permite homepage full-width */

.sp-full{
    position:relative;
    width:100vw;
    left:50%;
    margin-left:-50vw;
}

.sp-home-hero{
    background:
        radial-gradient(circle at 80% 28%,rgba(255,100,36,.13),transparent 28%),
        linear-gradient(135deg,#0d0f14,#14171e);
    border-bottom:1px solid #292e36;
    padding:70px 0 80px;
}

.sp-hero-grid{
    display:grid;
    grid-template-columns:1.25fr .65fr;
    gap:65px;
    align-items:center;
}

.sp-rating{
    display:inline-block;
    padding:7px 13px;
    margin-bottom:22px;
    background:#171a21;
    border:1px solid #30353e;
    border-radius:50px;
    color:#d4d9e1;
    font-size:13px;
}

.sp-rating span{
    color:var(--green);
}

.sp-hero-content h1{
    margin:0 0 18px;
    color:#fff!important;
    font-size:49px;
    line-height:1.1;
    font-weight:900;
}

.sp-hero-content h1 strong{
    color:var(--sp-orange);
}

.sp-hero-content > p{
    max-width:650px;
    color:#aeb6c4;
    font-size:16px;
    line-height:1.7;
}

.sp-checks{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px 28px;
    margin:27px 0 30px;
}

.sp-checks div:before{
    content:"✓";
    margin-right:9px;
    color:var(--sp-orange);
    font-weight:900;
}

.sp-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.sp-button{
    padding:14px 23px;
    border-radius:7px;
    font-weight:900;
}

.sp-button-orange{
    background:var(--sp-orange);
    color:#fff!important;
}

.sp-button-outline{
    background:#191c23;
    border:1px solid #555d69;
    color:#fff!important;
}

/* TRIAL */

.sp-trial{
    position:relative;
    padding:36px 28px 30px;
    background:var(--sp-card);
    border:1px solid var(--sp-orange);
    border-radius:15px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.28);
}

.sp-trial-icon{
    width:48px;
    height:48px;
    margin:-61px auto 18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--sp-orange);
    color:#fff;
    font-size:18px;
}

.sp-trial h2{
    margin:0 0 12px;
    color:#fff!important;
    font-size:23px;
}

.sp-trial p{
    color:#9ca5b4;
    line-height:1.6;
}

.sp-trial-price{
    margin:20px 0;
    color:#fff;
    font-size:58px;
    font-weight:900;
}

.sp-trial-price small{
    font-size:22px;
}

.sp-trial-price span{
    color:#8992a1;
    font-size:13px;
    font-weight:400;
}

.sp-trial > a{
    display:block;
    padding:15px;
    background:var(--sp-orange);
    color:#fff!important;
    border-radius:7px;
    font-weight:900;
}

.sp-trial-safe{
    margin-top:14px;
    color:var(--sp-green);
    font-size:13px;
}

/* PACKAGES */

.sp-packages{
    padding:68px 0 78px;
    background:#11141a;
}

.sp-section-title{
    margin-bottom:40px;
    text-align:center;
}

.sp-section-title > span{
    color:var(--sp-orange);
    font-size:12px;
    font-weight:900;
}

.sp-section-title h2{
    margin:7px 0;
    color:#fff!important;
    font-size:35px;
    font-weight:900;
}

.sp-section-title p{
    color:var(--sp-muted);
}

.sp-package-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.sp-package{
    position:relative;
    padding:25px 21px;
    background:var(--sp-card);
    border:1px solid var(--sp-border);
    border-radius:13px;
    transition:.2s ease;
}

.sp-package:hover{
    transform:translateY(-5px);
    border-color:var(--sp-orange);
}

.sp-package h3{
    margin:0 0 7px;
    color:#fff!important;
    font-size:20px;
}

.sp-package > p{
    min-height:38px;
    color:var(--sp-muted);
}

.sp-package-price{
    margin:18px 0;
    color:var(--sp-orange);
    font-size:31px;
    font-weight:900;
}

.sp-package-price span{
    color:#89919f;
    font-size:12px;
    font-weight:400;
}

.sp-package ul{
    list-style:none;
    min-height:205px;
    margin:0 0 22px;
    padding:0;
}

.sp-package li{
    padding:8px 0;
    border-bottom:1px solid #282c34;
}

.sp-package li:before{
    content:"✓";
    margin-right:8px;
    color:var(--sp-orange);
}

.sp-package > a{
    display:block;
    padding:12px;
    border:1px solid #373c46;
    border-radius:7px;
    background:#22262f;
    color:#fff!important;
    text-align:center;
    font-weight:900;
}

.sp-package > a:hover{
    background:var(--sp-orange);
    border-color:var(--sp-orange);
}

.sp-package-featured{
    border:2px solid var(--sp-orange);
}

.sp-package-featured > a{
    background:var(--sp-orange);
    border-color:var(--sp-orange);
}

.sp-recommended{
    position:absolute;
    top:-12px;
    right:15px;
    padding:5px 10px;
    border-radius:5px;
    background:var(--sp-orange);
    color:#fff;
    font-size:10px;
    font-weight:900;
}

/* FEATURES */

.sp-features-section{
    padding:70px 0;
    background:#0e1116;
}

.sp-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.sp-feature-grid article{
    padding:27px;
    border:1px solid var(--sp-border);
    border-radius:13px;
    background:var(--sp-card);
}

.sp-feature-grid article > div{
    color:var(--sp-orange);
    font-size:28px;
}

.sp-feature-grid h3{
    color:#fff!important;
}

.sp-feature-grid p{
    color:var(--sp-muted);
    line-height:1.6;
}

/* WHMCS INTERIOR */

.sp-main .card,
.sp-main .panel,
.sp-main .well,
.sp-main .list-group,
.sp-main .list-group-item,
.sp-main .modal-content{
    background:var(--sp-card)!important;
    color:var(--sp-text)!important;
    border-color:var(--sp-border)!important;
}

.sp-main .card,
.sp-main .panel{
    border-radius:11px!important;
}

.sp-main .card-header,
.sp-main .panel-heading{
    background:var(--sp-card2)!important;
    color:#fff!important;
    border-color:var(--sp-border)!important;
}

.sp-main h1,
.sp-main h2,
.sp-main h3,
.sp-main h4,
.sp-main h5,
.sp-main h6{
    color:#fff!important;
}

.sp-main input,
.sp-main textarea,
.sp-main select,
.sp-main .form-control{
    background:#101319!important;
    color:#fff!important;
    border-color:#383d47!important;
}

.sp-main input:focus,
.sp-main textarea:focus,
.sp-main select:focus,
.sp-main .form-control:focus{
    border-color:var(--sp-orange)!important;
    box-shadow:0 0 0 3px rgba(255,100,36,.12)!important;
}

.sp-main .btn-primary,
.sp-main .btn-success,
.sp-main .btn-info{
    background:var(--sp-orange)!important;
    border-color:var(--sp-orange)!important;
    color:#fff!important;
}

.sp-main .btn-default,
.sp-main .btn-secondary{
    background:#232730!important;
    border-color:#383d47!important;
    color:#fff!important;
}

/* DASHBOARD */

.tiles,
.tiles .tile{
    background:var(--sp-card)!important;
    color:#fff!important;
}

.tiles .tile{
    border-color:var(--sp-border)!important;
    border-bottom:3px solid var(--sp-orange)!important;
}

.tiles .tile i{
    color:var(--sp-orange)!important;
}

/* TABLE */

.sp-main table,
.sp-main .table{
    background:var(--sp-card)!important;
    color:var(--sp-text)!important;
}

.sp-main .table > thead > tr > th{
    background:#20242c!important;
    color:#fff!important;
    border-color:#343943!important;
}

.sp-main .table > tbody > tr > td{
    background:var(--sp-card)!important;
    color:var(--sp-text)!important;
    border-color:#30343d!important;
}

/* PRODUCT DETAILS */

#tabOverview > .card{
    width:100%!important;
    max-width:980px!important;
    margin:0 auto 20px!important;
}

#tabOverview .product-status,
#tabOverview .product-icon{
    background:var(--sp-card)!important;
    color:#fff!important;
}

#tabOverview .product-icon .fa-stack-2x{
    color:var(--sp-orange)!important;
}

#tabOverview .product-icon .fa-stack-1x{
    color:#fff!important;
}

#tabOverview .product-status-text{
    padding:10px!important;
    background:#15181e!important;
    color:var(--sp-green)!important;
    border-top:1px solid var(--sp-border)!important;
}

#tabOverview .nav-tabs{
    width:100%!important;
    max-width:980px!important;
    margin:0 auto!important;
    background:#14171d!important;
    border-color:var(--sp-border)!important;
}

#tabOverview .nav-tabs .nav-link{
    color:#aeb6c4!important;
    background:#14171d!important;
    border:0!important;
    border-bottom:3px solid transparent!important;
    border-radius:0!important;
}

#tabOverview .nav-tabs .nav-link.active{
    color:#fff!important;
    background:#1c2027!important;
    border-bottom:3px solid var(--sp-orange)!important;
}

#tabOverview .product-details-tab-container{
    width:100%!important;
    max-width:980px!important;
    margin:0 auto!important;
    background:var(--sp-card)!important;
    color:var(--sp-text)!important;
    border:1px solid var(--sp-border)!important;
    border-top:0!important;
}

/* FOOTER */

.sp-footer{
    padding-top:55px;
    background:#14171d;
    border-top:1px solid var(--sp-border);
}

.sp-footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:45px;
}

.sp-footer p{
    max-width:300px;
    color:var(--sp-muted);
    line-height:1.7;
}

.sp-footer h3{
    color:#fff;
    font-size:14px;
}

.sp-footer div > a:not(.sp-logo){
    display:block;
    margin:11px 0;
    color:#aeb6c4!important;
}

.sp-footer div > a:hover{
    color:var(--sp-orange)!important;
}

.sp-footer-bottom{
    margin-top:45px;
    padding:18px;
    border-top:1px solid #292d35;
    color:#818a99;
    text-align:center;
    font-size:12px;
}

/* MOBILE */

@media(max-width:900px){

    .sp-nav{
        display:none;
    }

    .sp-account{
        margin-left:auto;
    }

    .sp-hero-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .sp-package-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .sp-footer-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){

    .sp-container{
        padding-left:12px;
        padding-right:12px;
    }

    .sp-topbar .sp-container{
        display:block;
        padding-top:9px;
        padding-bottom:9px;
    }

    .sp-top-links{
        margin-top:7px;
        gap:12px;
    }

    .sp-header-row{
        min-height:64px;
    }

    .sp-logo-mark{
        width:35px;
        height:35px;
        padding:7px;
    }

    .sp-logo-name{
        font-size:22px;
    }

    .sp-account{
        font-size:12px;
    }

    .sp-page-shell{
        padding:12px 8px;
    }

    .sp-home-hero{
        padding:42px 0 50px;
    }

    .sp-hero-content h1{
        font-size:34px;
    }

    .sp-checks{
        grid-template-columns:1fr;
    }

    .sp-hero-buttons{
        display:grid;
    }

    .sp-button{
        text-align:center;
    }

    .sp-trial{
        padding:32px 18px;
    }

    .sp-package-grid,
    .sp-feature-grid,
    .sp-footer-grid{
        grid-template-columns:1fr;
    }

    .sp-package ul{
        min-height:0;
    }

    #tabOverview > .card,
    #tabOverview .nav-tabs,
    #tabOverview .product-details-tab-container{
        width:100%!important;
        max-width:100%!important;
    }

    #tabOverview .product-details > .row{
        display:block!important;
    }

    #tabOverview .product-details .col-md-6{
        width:100%!important;
        max-width:100%!important;
        padding:12px 7px!important;
        text-align:center!important;
    }

    #tabOverview .nav-tabs{
        display:flex!important;
        flex-wrap:nowrap!important;
        overflow-x:auto!important;
    }

    #tabOverview .nav-tabs .nav-item{
        flex:1 0 auto!important;
    }

    #tabOverview .nav-tabs .nav-link{
        white-space:nowrap!important;
        text-align:center!important;
        padding:10px!important;
        font-size:12px!important;
    }
}

/* =====================================================
   CONTACT - ALINIERE STANGA
===================================================== */

.sp-main form label,
.sp-main .form-group label,
.sp-main .control-label,
.sp-main .col-form-label {
    display:block !important;
    width:100% !important;
    text-align:left !important;
    justify-content:flex-start !important;
    margin-bottom:7px !important;
    color:#ffffff !important;
    font-weight:700 !important;
}

/* campurile contact */
.sp-main form .form-group,
.sp-main form .row {
    text-align:left !important;
}

.sp-main form input,
.sp-main form textarea,
.sp-main form select,
.sp-main form .form-control {
    text-align:left !important;
}

/* daca WHMCS pune etichete in coloane */
.sp-main form .col-sm-3,
.sp-main form .col-sm-4,
.sp-main form .col-md-3,
.sp-main form .col-md-4 {
    text-align:left !important;
}

/* =====================================================
   FOOTER - SEPARATOARE PORTOCALII
===================================================== */

.sp-footer h3 {
    position:relative !important;
    display:inline-block !important;
    margin:0 0 24px !important;
    padding-bottom:11px !important;
    color:#ffffff !important;
    font-size:14px !important;
    font-weight:900 !important;
    letter-spacing:.3px !important;
}

.sp-footer h3::after {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    bottom:0 !important;
    width:38px !important;
    height:3px !important;
    border-radius:10px !important;
    background:linear-gradient(90deg,#ff6424,#ff8b52) !important;
    box-shadow:0 2px 10px rgba(255,100,36,.25) !important;
}

/* distanta mai frumoasa intre linkurile din footer */
.sp-footer div > a:not(.sp-logo) {
    margin:12px 0 !important;
    transition:.18s ease !important;
}

.sp-footer div > a:not(.sp-logo):hover {
    color:#ff6424 !important;
    padding-left:4px !important;
}

/* linie portocalie discreta deasupra copyright */
.sp-footer-bottom {
    position:relative !important;
    margin-top:50px !important;
    padding-top:24px !important;
}

.sp-footer-bottom::before {
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:90px !important;
    height:2px !important;
    border-radius:10px !important;
    background:linear-gradient(90deg,transparent,#ff6424,transparent) !important;
}

/* MOBILE */
@media(max-width:600px) {
    .sp-footer h3 {
        margin-bottom:18px !important;
    }

    .sp-footer h3::after {
        width:34px !important;
    }

    .sp-main form label,
    .sp-main .form-group label,
    .sp-main .control-label {
        text-align:left !important;
    }
}

/* =====================================================
   MOBILE - TABURI SERVICIU CLARE
===================================================== */

@media(max-width:600px){

    #tabOverview .nav-tabs{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:6px !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 auto 8px !important;
        padding:6px !important;
        overflow:visible !important;
        background:#11141a !important;
        border:1px solid #2b3039 !important;
        border-radius:9px !important;
    }

    #tabOverview .nav-tabs .nav-item{
        width:100% !important;
        margin:0 !important;
        float:none !important;
        flex:none !important;
    }

    #tabOverview .nav-tabs .nav-link{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        width:100% !important;
        min-height:42px !important;
        margin:0 !important;
        padding:9px 7px !important;

        background:#191d24 !important;
        color:#aeb6c4 !important;

        border:1px solid #2d323b !important;
        border-radius:7px !important;

        font-size:12px !important;
        line-height:1.2 !important;
        text-align:center !important;
        white-space:normal !important;
    }

    #tabOverview .nav-tabs .nav-link i{
        flex:0 0 auto !important;
        color:#8e97a6 !important;
    }

    #tabOverview .nav-tabs .nav-link.active,
    #tabOverview .nav-tabs .nav-item.show .nav-link{
        background:#22262e !important;
        color:#fff !important;
        border:1px solid #ff6424 !important;
        box-shadow:inset 0 -3px 0 #ff6424 !important;
    }

    #tabOverview .nav-tabs .nav-link.active i{
        color:#ff6424 !important;
    }

    #tabOverview .responsive-tabs-sm-connector{
        display:none !important;
    }

    #tabOverview .product-details-tab-container{
        margin-top:0 !important;
        border-radius:9px !important;
    }
}