/* =========================================================
   DJ TECHNOLOGIES - ENTERPRISE DESIGN SYSTEM
   enterprise.css
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{

    /* COLORS */

    --dj-primary:#2563eb;
    --dj-primary-dark:#1d4ed8;
    --dj-success:#22c55e;
    --dj-success-dark:#16a34a;
    --dj-danger:#ef4444;
    --dj-warning:#f59e0b;

    --dj-dark:#0f172a;
    --dj-dark-2:#111827;

    --dj-text:#0f172a;
    --dj-text-light:#64748b;

    --dj-border:#e2e8f0;
    --dj-bg:#f8fafc;
    --dj-bg-soft:#f1f5f9;

    --dj-white:#ffffff;

    /* SHADOWS */

    --dj-shadow-soft:
        0 10px 30px rgba(15,23,42,0.05);

    --dj-shadow-medium:
        0 20px 50px rgba(15,23,42,0.08);

    --dj-shadow-large:
        0 30px 70px rgba(15,23,42,0.12);

    --dj-shadow-xl:
        0 40px 100px rgba(15,23,42,0.16);

    /* RADIUS */

    --dj-radius-sm:10px;
    --dj-radius-md:16px;
    --dj-radius-lg:22px;
    --dj-radius-xl:30px;

    /* TRANSITIONS */

    --dj-transition:
        all 0.3s ease;

}

/* =========================================================
   GLOBAL
========================================================= */

html{
    scroll-behavior:smooth;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

body{
    background:var(--dj-bg);
    color:var(--dj-text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
        overflow-x:hidden;
}

a,
button,
input,
textarea,
select{
    transition:var(--dj-transition);
}

img{
    max-width:100%;
    height:auto;
}

/* =========================================================
   CONTAINER
========================================================= */

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

/* =========================================================
   TYPOGRAPHY
========================================================= */

.dj-heading{
    color:var(--dj-text);
    font-weight:800;
    letter-spacing:-1px;
}

.dj-subheading{
    color:var(--dj-text-light);
    line-height:1.9;
}

.dj-muted{
    color:var(--dj-text-light);
}

/* =========================================================
   SECTIONS
========================================================= */

.dj-section{
    padding:90px 0;
}

.dj-section-sm{
    padding:60px 0;
}

.dj-section-title{
    text-align:center;
    margin-bottom:70px;
}

.dj-section-title h2{
    font-size:52px;
    font-weight:800;
    color:var(--dj-text);
    margin-bottom:18px;
    letter-spacing:-1px;
}

.dj-section-title p{
    max-width:760px;
    margin:0 auto;
    color:var(--dj-text-light);
    font-size:18px;
    line-height:1.9;
}

/* =========================================================
   PAGE HERO
========================================================= */

.dj-page-hero{
    color:#fff;
    padding:70px 40px;
    border-radius:28px;
    margin-bottom:40px;
    overflow:hidden;
    position:relative;
}

.dj-page-hero-dark{
    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );
}

/* =========================================================
   CARDS
========================================================= */

.dj-card{
    background:var(--dj-white);
    border-radius:var(--dj-radius-lg);
    border:1px solid var(--dj-border);
    box-shadow:var(--dj-shadow-soft);
    transition:var(--dj-transition);
    overflow:hidden;
}

.dj-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--dj-shadow-medium);
}

.dj-card-body{
    padding:35px;
}

.dj-glass-card{
    background:rgba(255,255,255,0.75);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:var(--dj-radius-lg);
    box-shadow:var(--dj-shadow-medium);
}

.dj-dashboard-card{
    background:var(--dj-white);
    border-radius:var(--dj-radius-lg);
    padding:30px;
    border:1px solid var(--dj-border);
    box-shadow:var(--dj-shadow-soft);
    transition:var(--dj-transition);
}

.dj-dashboard-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--dj-shadow-medium);
}

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

.dj-icon-box{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(
            135deg,
            var(--dj-primary),
            var(--dj-primary-dark)
        );
    color:#fff;
    font-size:28px;
    box-shadow:
        0 15px 35px rgba(37,99,235,0.25);
}

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

.dj-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:none;
    border-radius:14px;
    padding:14px 26px;
    font-weight:700;
    text-decoration:none !important;
    transition:var(--dj-transition);
    cursor:pointer;
}

.dj-btn:hover{
    transform:translateY(-2px);
}

.dj-btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--dj-primary),
            var(--dj-primary-dark)
        );

    color:#fff !important;

    box-shadow:
        0 15px 35px rgba(37,99,235,0.22);
}

.dj-btn-primary:hover{
    box-shadow:
        0 20px 45px rgba(37,99,235,0.28);
}

.dj-btn-success{
    background:
        linear-gradient(
            135deg,
            var(--dj-success),
            var(--dj-success-dark)
        );

    color:#fff !important;

    box-shadow:
        0 15px 35px rgba(34,197,94,0.22);
}

.dj-btn-success:hover{
    box-shadow:
        0 20px 45px rgba(34,197,94,0.28);
}

.dj-btn-outline{
    background:#fff;
    border:1px solid var(--dj-border);
    color:var(--dj-text) !important;
}

.dj-btn-outline:hover{
    background:var(--dj-bg-soft);
}

.dj-btn-mobile-full{
    width:100%;
}

/* =========================================================
   BADGES / STATUS
========================================================= */

.dj-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:999px;
    background:#eff6ff;
    color:var(--dj-primary);
    font-size:13px;
    font-weight:700;
}

.dj-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:10px 18px;
    font-size:13px;
    font-weight:700;
}

.dj-status-success{
    background:#dcfce7;
    color:#166534;
}

.dj-status-danger{
    background:#fee2e2;
    color:#991b1b;
}

.dj-status-warning{
    background:#fef3c7;
    color:#92400e;
}

.dj-status-info{
    background:#dbeafe;
    color:#1d4ed8;
}

/* =========================================================
   NAVBAR
========================================================= */

#header{
    position:relative;
    z-index:999;
}

.navbar-brand img{
    max-height:48px;
}

.navbar-nav .nav-link{
    color:#334155 !important;
    font-weight:600;
    padding:12px 18px !important;
    border-radius:14px;
    transition:var(--dj-transition);
}

.navbar-nav .nav-link:hover{
    background:#eff6ff;
    color:var(--dj-primary) !important;
}

.navbar-nav .active > .nav-link{
    background:
        linear-gradient(
            135deg,
            var(--dj-primary),
            var(--dj-primary-dark)
        );

    color:#fff !important;
}

/* =========================================================
   DROPDOWNS
========================================================= */

.dropdown-menu{
    border:none;
    border-radius:20px;
    padding:14px;
    box-shadow:var(--dj-shadow-large);
    min-width:260px;
    margin-top:14px;
}

.dropdown-item{
    border-radius:14px;
    transition:var(--dj-transition);
}

.dropdown-item:hover{
    background:#eff6ff;
}

.dropdown-item a{
    color:#334155 !important;
    text-decoration:none !important;
}

/* =========================================================
   SIDEBARS
========================================================= */

.sidebar .card{
    border:none;
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--dj-shadow-soft);
    border:1px solid var(--dj-border);
}

.sidebar .card-header{
    background:
        linear-gradient(
            135deg,
            var(--dj-dark),
            var(--dj-dark-2)
        );

    color:#fff;
    border:none;
}

.sidebar .list-group-item{
    border:none;
    border-radius:14px !important;
    margin:8px;
    transition:var(--dj-transition);
}

.sidebar .list-group-item:hover{
    background:#eff6ff;
}

.sidebar .list-group-item.active{
    background:
        linear-gradient(
            135deg,
            var(--dj-primary),
            var(--dj-primary-dark)
        );

    color:#fff !important;
}

/* =========================================================
   ALERTS
========================================================= */

.alert{
    border:none;
    border-radius:18px;
    padding:18px 22px;
    box-shadow:var(--dj-shadow-soft);
}

.alert-success{
    background:#ecfdf5;
    color:#166534;
}

.alert-danger{
    background:#fef2f2;
    color:#991b1b;
}

.alert-warning{
    background:#fffbeb;
    color:#92400e;
}

.alert-info{
    background:#eff6ff;
    color:#1e40af;
}

/* =========================================================
   FORMS
========================================================= */

.form-control,
.custom-select{
    height:54px;
    border-radius:14px;
    border:1px solid #dbe4ee;
    padding:0 18px;
    box-shadow:none !important;
}

.form-control:focus,
.custom-select:focus{
    border-color:var(--dj-primary);
    box-shadow:
        0 0 0 4px rgba(37,99,235,0.08) !important;
}

textarea.form-control{
    min-height:140px;
    padding-top:16px;
}

/* =========================================================
   TABLES
========================================================= */

.table{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
}

.table thead th{
    border-top:none;
    background:#f8fafc;
    color:#0f172a;
    font-weight:700;
}

.dj-table-responsive{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/* =========================================================
   BREADCRUMB
========================================================= */

.master-breadcrumb{
    background:#fff;
    border-bottom:1px solid var(--dj-border);
}

.breadcrumb{
    background:transparent;
    margin:0;
    padding:16px 0;
}

.breadcrumb-item a{
    color:var(--dj-primary);
}

/* =========================================================
   LOGIN / AUTH
========================================================= */

.logincontainer,
.clientarealogin{
    border-radius:24px;
    overflow:hidden;
}

.logincontainer .card,
.clientarealogin .card{
    border:none;
    box-shadow:var(--dj-shadow-medium);
}

/* =========================================================
   HERO
========================================================= */

.dj-hero-gradient{
    background:
        radial-gradient(
            circle at top right,
            rgba(37,99,235,0.22),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #020617 0%,
            #0f172a 40%,
            #111827 100%
        );
}

/* =========================================================
   ANIMATIONS
========================================================= */

.dj-hover-lift{
    transition:var(--dj-transition);
}

.dj-hover-lift:hover{
    transform:translateY(-6px);
}

.dj-hover-scale{
    transition:var(--dj-transition);
}

.dj-hover-scale:hover{
    transform:scale(1.02);
}

/* =========================================================
   UTILITIES
========================================================= */

.dj-rounded{
    border-radius:var(--dj-radius-lg);
}

.dj-rounded-xl{
    border-radius:var(--dj-radius-xl);
}

.dj-shadow{
    box-shadow:var(--dj-shadow-medium);
}

.dj-shadow-xl{
    box-shadow:var(--dj-shadow-xl);
}

.dj-bg-soft{
    background:var(--dj-bg-soft);
}

.dj-bg-dark{
    background:var(--dj-dark);
    color:#fff;
}

.dj-text-gradient{
    background:
        linear-gradient(
            135deg,
            var(--dj-primary),
            #60a5fa
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/* =========================================================
   SPACING UTILITIES
========================================================= */

.dj-mb-0{margin-bottom:0!important;}
.dj-mb-1{margin-bottom:10px!important;}
.dj-mb-2{margin-bottom:20px!important;}
.dj-mb-3{margin-bottom:30px!important;}
.dj-mb-4{margin-bottom:40px!important;}
.dj-mb-5{margin-bottom:50px!important;}

.dj-mt-0{margin-top:0!important;}
.dj-mt-1{margin-top:10px!important;}
.dj-mt-2{margin-top:20px!important;}
.dj-mt-3{margin-top:30px!important;}
.dj-mt-4{margin-top:40px!important;}
.dj-mt-5{margin-top:50px!important;}

.dj-text-center{
    text-align:center;
}

.dj-w-100{
    width:100%;
}


@media(max-width:1199px){

    .dj-section{
        padding:70px 0;
    }

    .dj-section-title h2{
        font-size:42px;
    }

}

@media(max-width:991px){

    .dj-section{
        padding:60px 0;
    }

    .dj-section-title{
        margin-bottom:50px;
    }

    .dj-section-title h2{
        font-size:36px;
    }

    .dj-card-body{
        padding:28px;
    }

}

@media(max-width:767px){

    .dj-section{
        padding:50px 0;
    }

    .dj-section-title h2{
        font-size:30px;
    }

    .dj-section-title p{
        font-size:16px;
    }

    .dj-card-body{
        padding:24px;
    }

}

/* =========================================================
   BILLING / INVOICE SYSTEM
========================================================= */

.dj-invoice-page{
    background:#f8fafc;
    min-height:100vh;
}

.dj-invoice-container{
    max-width:1400px;
    margin:0 auto;
    padding:40px 20px;
}

.dj-billing-hero{
    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color:#fff;
    padding:60px 45px;
    border-radius:28px;
    margin-bottom:40px;
    overflow:hidden;
    position:relative;
}

.dj-billing-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,0.1);
    padding:10px 18px;
    border-radius:999px;
    margin-bottom:24px;
    font-weight:700;
}

.dj-billing-card{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
    border:1px solid #f1f5f9;
}

.dj-billing-section{
    padding:45px;
}

.dj-billing-soft-card{
    background:#f8fafc;
    border-radius:24px;
    padding:30px;
    height:100%;
}

.dj-billing-table-header{
    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color:#fff;
    padding:30px 35px;
}

.dj-billing-table-header h3{
    font-size:30px;
    font-weight:700;
    margin:0;
}

.dj-status-badge{
    border-radius:999px;
    padding:14px 24px;
    font-size:16px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.dj-status-paid{
    background:#dcfce7;
    color:#166534;
}

.dj-status-unpaid{
    background:#fee2e2;
    color:#991b1b;
}

.dj-status-draft{
    background:#fef3c7;
    color:#92400e;
}

.dj-status-cancelled{
    background:#e5e7eb;
    color:#374151;
}

.dj-status-refunded{
    background:#dbeafe;
    color:#1d4ed8;
}

.dj-invoice-action-btn{
    border-radius:16px;
    padding:14px 26px;
    font-weight:700;
}

.dj-billing-table td{
    padding:24px 30px !important;
    vertical-align:middle;
}

.dj-billing-total-row{
    background:#f8fafc;
    font-size:24px;
    font-weight:700;
}

/* =========================================================
   SUPPORT / TICKET SYSTEM
========================================================= */

.dj-support-hero{
    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color:#fff;
    padding:70px 40px;
    border-radius:26px;
    margin-bottom:40px;
    overflow:hidden;
    position:relative;
}

.dj-support-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,0.1);
    padding:10px 18px;
    border-radius:999px;
    margin-bottom:24px;
    font-weight:700;
}

.dj-support-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
    border:1px solid #f1f5f9;
}

.dj-support-header{
    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color:#fff;
    padding:35px 40px;
}

.dj-ticket-thread{
    padding:35px;
}

.dj-ticket-message{
    margin-bottom:35px;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,0.04);
}

.dj-ticket-client{
    background:#fff;
    border:1px solid #f1f5f9;
}

.dj-ticket-staff{
    background:#eff6ff;
    border:1px solid #bfdbfe;
}

.dj-ticket-top{
    padding:24px 30px;
    border-bottom:1px solid #e2e8f0;
}

.dj-ticket-client .dj-ticket-top{
    background:#f8fafc;
}

.dj-ticket-staff .dj-ticket-top{
    background:#dbeafe;
}

.dj-ticket-content{
    padding:35px;
    line-height:1.9;
    font-size:16px;
    color:#334155;
}

.dj-ticket-attachments{
    padding:30px;
    border-top:1px solid #e2e8f0;
    background:#f8fafc;
}

.dj-ticket-attachment-list{
    margin-top:20px;
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    padding:0;
    list-style:none;
}

.dj-ticket-file{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border-radius:16px;
    padding:18px;
    border:1px solid #e2e8f0;
    color:#0f172a;
    text-decoration:none !important;
}

.dj-support-form{
    padding:40px;
}

.dj-support-btn{
    border-radius:18px;
    padding:16px 34px;
    font-size:18px;
    font-weight:700;
}

/* =========================================================
   SUPPORT LIST / HELPDESK
========================================================= */

.dj-support-stat-card{
    background:#fff;
    border-radius:24px;
    padding:30px;
    box-shadow:0 10px 35px rgba(0,0,0,0.05);
    border:1px solid #f1f5f9;
    height:100%;
}

.dj-support-table-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
    border:1px solid #f1f5f9;
}

.dj-support-table-header{
    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color:#fff;
    padding:32px 36px;
}

.dj-ticket-table-wrap{
    padding:25px;
}

.dj-ticket-table{
    border-collapse:separate !important;
    border-spacing:0 16px !important;
}

.dj-ticket-table thead th{
    border:none !important;
    color:#64748b !important;
    font-size:14px !important;
    text-transform:uppercase;
    font-weight:700;
    padding:12px 18px !important;
}

.dj-ticket-row{
    cursor:pointer;
    background:#fff;
    box-shadow:0 10px 35px rgba(0,0,0,0.04);
    transition:0.3s;
}

.dj-ticket-row:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

.dj-ticket-cell{
    padding:24px 18px !important;
    border:none !important;
    vertical-align:middle !important;
}

.dj-ticket-cell-start{
    border-radius:18px 0 0 18px;
}

.dj-ticket-cell-end{
    border-radius:0 18px 18px 0;
}

/* =========================================================
   PRODUCTS / SERVICES SYSTEM
========================================================= */

.dj-service-stat-card{
    background:#fff;
    border-radius:24px;
    padding:32px;
    box-shadow:0 10px 35px rgba(0,0,0,0.05);
    border:1px solid #f1f5f9;
    height:100%;
}

.dj-service-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:22px;
}

.dj-service-table-card{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
    border:1px solid #f1f5f9;
}

.dj-service-table-header{
    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color:#fff;
    padding:35px 40px;
}

.dj-service-table-wrap{
    padding:25px;
}

.dj-service-table{
    border-collapse:separate !important;
    border-spacing:0 16px !important;
}

.dj-service-table thead th{
    border:none !important;
    color:#64748b !important;
    font-size:14px !important;
    text-transform:uppercase;
    font-weight:700;
    padding:12px 18px !important;
}

.dj-service-row{
    cursor:pointer;
    background:#fff;
    box-shadow:0 10px 35px rgba(0,0,0,0.04);
    transition:0.3s;
}

.dj-service-row:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

.dj-service-cell{
    padding:24px 18px !important;
    border:none !important;
    vertical-align:middle !important;
}

.dj-service-cell-start{
    border-radius:18px 0 0 18px;
}

.dj-service-cell-end{
    border-radius:0 18px 18px 0;
}

.dj-service-product{
    font-size:20px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:10px;
}

.dj-service-domain{
    color:#2563eb;
    font-weight:600;
    text-decoration:none !important;
}

.dj-service-price{
    font-size:22px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:6px;
}

.dj-service-cycle{
    color:#64748b;
    font-size:14px;
}

.dj-service-date{
    font-weight:700;
    color:#0f172a;
}

.dj-service-trust{
    margin-top:40px;
    background:#fff;
    border-radius:24px;
    padding:35px;
    box-shadow:0 10px 35px rgba(0,0,0,0.05);
    border:1px solid #f1f5f9;
}

@media(max-width:767px){

    .dj-billing-hero,
    .dj-support-hero{
        padding:45px 28px;
    }

    .dj-billing-section,
    .dj-ticket-thread,
    .dj-support-form{
        padding:24px;
    }

    .dj-ticket-content{
        padding:24px;
    }

}

/* =========================================================
   SUPPORT SUBMIT / DEPARTMENT SYSTEM
========================================================= */

.dj-support-feature-card{
    background:#fff;
    border-radius:26px;
    padding:35px;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
    border:1px solid #f1f5f9;
    height:100%;
}

.dj-support-feature-icon{
    width:80px;
    height:80px;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    margin-bottom:24px;
}

.dj-support-department-card{
    background:#fff;
    border-radius:26px;
    padding:35px;
    box-shadow:0 10px 35px rgba(0,0,0,0.05);
    border:1px solid #f1f5f9;
    transition:0.3s;
    height:100%;
}

.dj-support-department-card:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 70px rgba(0,0,0,0.08);
}

.dj-support-department-badge{
    background:#ecfdf5;
    color:#16a34a;
    border-radius:999px;
    padding:10px 16px;
    font-size:13px;
    font-weight:700;
}

.dj-support-department-icon{
    width:78px;
    height:78px;
    background:#eff6ff;
    color:#2563eb;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
}

.dj-support-department-btn{
    background:#2563eb;
    color:#fff;
    border-radius:14px;
    padding:12px 20px;
    font-weight:700;
}

.dj-support-trust{
    margin-top:40px;
    background:#fff;
    border-radius:28px;
    padding:40px;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
    border:1px solid #f1f5f9;
}


/* =========================================================
   CUSTOM FIELDS / DYNAMIC FORMS
========================================================= */

.dj-form-label{
    font-weight:700;
    color:#0f172a;
    margin-bottom:12px;
    display:block;
    font-size:15px;
}

.dj-form-control{
    min-height:54px;
    border-radius:16px !important;
    border:1px solid #dbe4ee !important;
    background:#fff !important;
    padding:14px 18px !important;
    box-shadow:none !important;
}

.dj-form-control:focus{
    border-color:#2563eb !important;
    box-shadow:
        0 0 0 4px rgba(37,99,235,0.08) !important;
}

.dj-custom-field input,
.dj-custom-field select,
.dj-custom-field textarea{
    width:100%;
    min-height:54px;
    border-radius:16px !important;
    border:1px solid #dbe4ee !important;
    padding:14px 18px !important;
    box-shadow:none !important;
    background:#fff !important;
}

.dj-custom-field textarea{
    min-height:140px;
}

.dj-custom-field input:focus,
.dj-custom-field select:focus,
.dj-custom-field textarea:focus{
    border-color:#2563eb !important;
    box-shadow:
        0 0 0 4px rgba(37,99,235,0.08) !important;
}

.dj-upload-box{
    background:#f8fafc;
    border:1px dashed #cbd5e1;
    border-radius:20px;
    padding:24px;
}


/* =========================================================
   KNOWLEDGEBASE ARTICLE SYSTEM
========================================================= */

.dj-kb-sidebar-card{
    background:#fff;
    border-radius:28px;
    padding:35px;
    margin-bottom:35px;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
    border:1px solid #f1f5f9;
}

.dj-kb-action-link{
    border-radius:18px;
    padding:18px 22px;
    text-decoration:none;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:0.3s;
}

.dj-kb-action-link:hover{
    transform:translateY(-2px);
    text-decoration:none;
}

.dj-kb-action-default{
    background:#f8fafc;
    color:#0f172a;
}

.dj-kb-action-primary{
    background:#eff6ff;
    color:#2563eb;
}

.dj-kb-action-success{
    background:#ecfdf5;
    color:#16a34a;
}

.dj-kb-action-warning{
    background:#fff7ed;
    color:#ea580c;
}

.kb-modern-article{
    font-size:17px;
    line-height:2;
    color:#334155;
}

.kb-modern-article h1,
.kb-modern-article h2,
.kb-modern-article h3,
.kb-modern-article h4,
.kb-modern-article h5,
.kb-modern-article h6{
    color:#0f172a;
    font-weight:700;
    margin-top:32px;
    margin-bottom:18px;
    line-height:1.4;
}

.kb-modern-article p{
    margin-bottom:24px;
}

.kb-modern-article img{
    max-width:100%;
    border-radius:18px;
    margin:24px 0;
}

.kb-modern-article pre{
    background:#0f172a;
    color:#fff;
    padding:24px;
    border-radius:18px;
    overflow:auto;
}

.kb-modern-article code{
    border-radius:8px;
}

.kb-modern-article ul,
.kb-modern-article ol{
    padding-left:24px;
    margin-bottom:24px;
}

.kb-modern-article table{
    width:100%;
    margin-bottom:24px;
    border-collapse:collapse;
}

.kb-modern-article table td,
.kb-modern-article table th{
    border:1px solid #e2e8f0;
    padding:14px;
}


/* =========================================================
   KNOWLEDGEBASE CATEGORY SYSTEM
========================================================= */

.dj-kb-card{
    background:#fff;
    border-radius:24px;
    padding:32px;
    box-shadow:0 10px 35px rgba(0,0,0,0.05);
    border:1px solid #f1f5f9;
    transition:0.3s;
    height:100%;
}

.dj-kb-card:hover{
    transform:translateY(-4px);
    box-shadow:0 25px 55px rgba(0,0,0,0.08);
}

.dj-kb-icon{
    width:76px;
    height:76px;
    background:#eff6ff;
    color:#2563eb;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
}

.dj-kb-badge{
    border-radius:999px;
    padding:12px 18px;
    font-size:13px;
    font-weight:700;
}

.dj-kb-action-btn{
    background:#2563eb;
    color:#fff;
    border-radius:14px;
    padding:12px 20px;
    font-weight:700;
}

.dj-kb-empty{
    background:#f8fafc;
    border-radius:22px;
    padding:40px;
    text-align:center;
    color:#64748b;
    font-size:17px;
}

/* =========================================================
   ENTERPRISE NAVBAR SYSTEM
========================================================= */

.dj-navbar{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.dj-navbar > li{
    list-style:none;
    position:relative;
}

.dj-navbar > li > a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    border-radius:14px;
    color:#334155 !important;
    font-size:15px;
    font-weight:600;
    text-decoration:none !important;
    transition:0.25s ease;
    white-space:nowrap;
    transform:translateY(0);
}

.dj-navbar > li > a:hover{
    background:#eff6ff;
    color:#2563eb !important;
    transform:translateY(-1px);
}

.dj-navbar > li.active > a{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff !important;
    box-shadow:0 10px 25px rgba(37,99,235,0.18);
}

.dj-navbar .badge{
    background:#2563eb;
    color:#fff;
    border-radius:999px;
    padding:4px 8px;
    font-size:11px;
    font-weight:700;
}

/* DROPDOWNS */

.dj-navbar .dropdown-menu{
    border:none;
    border-radius:20px;
    padding:14px;
    min-width:260px;
    margin-top:14px;
    box-shadow:0 25px 60px rgba(15,23,42,0.14);
    background:#fff;
    overflow:hidden;
}

.dj-navbar .dropdown-item{
    border-radius:12px;
    margin-bottom:4px;
    transition:0.2s ease;
}

.dj-navbar .dropdown-item:last-child{
    margin-bottom:0;
}

.dj-navbar .dropdown-item a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px !important;
    color:#334155 !important;
    font-size:14px;
    font-weight:600;
    text-decoration:none !important;
    border-radius:12px;
    transition:0.2s ease;
}

.dj-navbar .dropdown-item:hover a{
    background:#eff6ff;
    color:#2563eb !important;
}

.dj-navbar .dropdown-divider{
    margin:10px 0;
    border-top:1px solid #e2e8f0;
}

/* ICONS */

.dj-navbar i{
    font-size:14px;
}

/* MOBILE */

@media(max-width:991px){

    .dj-navbar{
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        width:100%;
    }

    .dj-navbar > li{
        width:100%;
    }

    .dj-navbar > li > a{
        width:100%;
        justify-content:space-between;
    }

    .dj-navbar .dropdown-menu{
        position:static !important;
        transform:none !important;
        width:100%;
        box-shadow:none;
        border:1px solid #e2e8f0;
        margin-top:10px;
    }

}

/* =========================================================
   DOMAIN MANAGEMENT SYSTEM
========================================================= */

.dj-domain-stat-card{
    background:#fff;
    border-radius:24px;
    padding:32px;
    box-shadow:0 10px 35px rgba(0,0,0,0.05);
    border:1px solid #f1f5f9;
    height:100%;
}

.dj-domain-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:22px;
}

.dj-domain-table{
    border-collapse:separate !important;
    border-spacing:0 16px !important;
}

.dj-domain-row{
    cursor:pointer;
    background:#fff;
    box-shadow:0 10px 35px rgba(0,0,0,0.04);
    transition:0.3s;
}

.dj-domain-row:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

.dj-domain-cell{
    padding:24px 18px !important;
    border:none !important;
    vertical-align:middle !important;
}

.dj-domain-cell-start{
    border-radius:18px 0 0 18px;
}

.dj-domain-cell-end{
    border-radius:0 18px 18px 0;
}

.dj-domain-name{
    font-size:22px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:10px;
}

.dj-domain-name a{
    color:#0f172a;
    text-decoration:none;
}

.dj-domain-badge{
    border-radius:999px;
    padding:6px 12px;
    font-size:12px;
    font-weight:700;
}

.dj-domain-status{
    border-radius:999px !important;
    padding:12px 20px !important;
    font-size:13px !important;
    font-weight:700 !important;
}

.dj-domain-action-btn{
    border-radius:14px !important;
    padding:12px 20px !important;
    font-weight:700 !important;
}

.dj-domain-trust-card{
    margin-top:40px;
    background:#fff;
    border-radius:24px;
    padding:35px;
    box-shadow:0 10px 35px rgba(0,0,0,0.05);
    border:1px solid #f1f5f9;
}

/* =========================================================
   PRODUCT DETAILS / HOSTING DASHBOARD
========================================================= */

.dj-product-card{
    background:#fff;
    border-radius:28px;
    padding:35px;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
    border:1px solid #f1f5f9;
    height:100%;
}

.dj-product-soft-card{
    background:#f8fafc;
    border-radius:22px;
    padding:24px;
    height:100%;
}

.dj-product-section{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.06);
    border:1px solid #f1f5f9;
    margin-bottom:40px;
}

.dj-product-section-header{
    background:linear-gradient(135deg,#0f172a,#1e293b);
    padding:25px 30px;
}

.dj-product-section-body{
    padding:35px;
}

.dj-product-title{
    font-size:32px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:10px;
}

.dj-product-subtitle{
    color:#64748b;
    margin:0;
    line-height:1.8;
}

.dj-product-info-label{
    color:#64748b;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:10px;
}

.dj-product-info-value{
    font-size:22px;
    font-weight:700;
    color:#0f172a;
    word-break:break-word;
}

.dj-product-action-btn{
    border:none !important;
    border-radius:16px !important;
    padding:14px 28px !important;
    font-weight:700 !important;
}

.dj-product-tab{
    border:none !important;
    border-radius:14px !important;
    font-weight:700 !important;
    padding:14px 22px !important;
}

.dj-product-status-badge{
    border-radius:999px;
    padding:14px 24px;
    font-weight:700;
    font-size:16px;
}

.dj-product-metric-card{
    background:#f8fafc;
    border-radius:24px;
    padding:35px;
    text-align:center;
}

.dj-product-addon-card{
    background:#f8fafc;
    border-radius:24px;
    overflow:hidden;
    height:100%;
}

.dj-product-addon-header{
    background:linear-gradient(135deg,#0f172a,#1e293b);
    color:#fff;
    padding:22px 24px;
}

.dj-product-addon-body{
    padding:30px;
}


/* =========================================================
   FINAL ENTERPRISE RESPONSIVE OPTIMIZATION
========================================================= */

/* =========================================================
   GLOBAL RESPONSIVE FIXES
========================================================= */

html,
body{
    overflow-x:hidden;
}

.container,
.container-fluid{
    max-width:100%;
}

.table-responsive{
    border-radius:20px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

img{
    max-width:100%;
    height:auto;
}

/* =========================================================
   MOBILE TYPOGRAPHY SYSTEM
========================================================= */

@media(max-width:991px){

    h1,
    .dj-heading{
        line-height:1.2 !important;
    }

    .dj-page-hero h1,
    .dj-support-header h2,
    .dj-billing-hero h1{
        font-size:42px !important;
    }

    .dj-section-title h2{
        font-size:38px !important;
    }

    .dj-product-title{
        font-size:28px !important;
    }

}

@media(max-width:767px){

    h1,
    .dj-heading{
        font-size:32px !important;
        line-height:1.25 !important;
        letter-spacing:-0.5px;
    }

    h2{
        font-size:28px !important;
    }

    h3{
        font-size:24px !important;
    }

    .dj-section-title h2{
        font-size:30px !important;
    }

    .dj-subheading,
    .dj-product-subtitle{
        font-size:15px !important;
        line-height:1.8 !important;
    }

}

/* =========================================================
   MOBILE SPACING SYSTEM
========================================================= */

@media(max-width:991px){

    .dj-page-hero,
    .dj-support-hero,
    .dj-billing-hero{
        padding:50px 32px !important;
    }

    .dj-card-body,
    .dj-dashboard-card,
    .dj-support-form,
    .dj-product-card,
    .dj-product-section-body{
        padding:28px !important;
    }

}

@media(max-width:767px){

    .dj-page-hero,
    .dj-support-hero,
    .dj-billing-hero{
        padding:38px 22px !important;
        border-radius:22px !important;
    }

    .dj-card-body,
    .dj-dashboard-card,
    .dj-support-form,
    .dj-product-card,
    .dj-product-section-body,
    .dj-domain-trust-card,
    .dj-service-trust{
        padding:22px !important;
    }

    .dj-section{
        padding:50px 0 !important;
    }

}

/* =========================================================
   MOBILE BUTTON SYSTEM
========================================================= */

@media(max-width:767px){

    .dj-btn,
    .dj-product-action-btn,
    .dj-domain-action-btn,
    .dj-support-btn,
    .dj-kb-action-btn{
        width:100%;
        justify-content:center;
        padding:16px 20px !important;
        font-size:15px !important;
    }

    .btn-group{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:12px;
    }

}

/* =========================================================
   MOBILE TABLE SYSTEM
========================================================= */

@media(max-width:991px){

    .dj-service-table,
    .dj-ticket-table,
    .dj-domain-table{
        min-width:900px;
    }

}

@media(max-width:767px){

    .dj-service-cell,
    .dj-ticket-cell,
    .dj-domain-cell{
        padding:18px 14px !important;
    }

}

/* =========================================================
   MOBILE NAVBAR
========================================================= */

@media(max-width:991px){

    .navbar-collapse{
        background:#fff;
        border-radius:24px;
        padding:18px;
        margin-top:16px;
        box-shadow:0 20px 60px rgba(0,0,0,0.08);
    }

    .navbar-nav{
        gap:8px;
    }

    .navbar-nav .nav-link{
        padding:14px 16px !important;
    }

}

/* =========================================================
   MOBILE CARDS
========================================================= */

@media(max-width:767px){

    .dj-card,
    .dj-dashboard-card,
    .dj-product-section,
    .dj-support-card,
    .dj-service-table-card,
    .dj-support-table-card{
        border-radius:22px !important;
    }

}

/* =========================================================
   MOBILE GRID FIXES
========================================================= */

@media(max-width:767px){

    .row{
        margin-left:-10px;
        margin-right:-10px;
    }

    .row > div{
        padding-left:10px;
        padding-right:10px;
    }

}

/* =========================================================
   MODAL OPTIMIZATION
========================================================= */

.modal-content{
    border:none;
    border-radius:26px;
    overflow:hidden;
}

@media(max-width:767px){

    .modal-dialog{
        margin:14px;
    }

}

/* =========================================================
   FORM OPTIMIZATION
========================================================= */

@media(max-width:767px){

    .form-control,
    .custom-select,
    .dj-form-control{
        min-height:52px !important;
        font-size:16px !important;
    }

}

/* =========================================================
   PERFORMANCE OPTIMIZATION
========================================================= */

.dj-card,
.dj-dashboard-card,
.dj-product-card,
.dj-service-row,
.dj-ticket-row{
    will-change:transform;
}

.dj-card:hover,
.dj-dashboard-card:hover,
.dj-service-row:hover,
.dj-ticket-row:hover{
    backface-visibility:hidden;
}

/* =========================================================
   FINAL APP-LIKE POLISH
========================================================= */

.dj-product-card,
.dj-dashboard-card,
.dj-support-card,
.dj-service-table-card,
.dj-domain-trust-card,
.dj-billing-card{
    backdrop-filter:blur(10px);
}

.dj-page-hero,
.dj-support-header,
.dj-billing-hero{
    position:relative;
}

.dj-page-hero::before,
.dj-support-header::before,
.dj-billing-hero::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:280px;
    height:280px;
    background:radial-gradient(
        circle,
        rgba(255,255,255,0.12),
        transparent 70%
    );
    pointer-events:none;
}

/* =========================================================
   TOUCH DEVICE IMPROVEMENTS
========================================================= */

@media(hover:none){

    .dj-card:hover,
    .dj-dashboard-card:hover,
    .dj-service-row:hover,
    .dj-ticket-row:hover{
        transform:none;
    }

}

/* =========================================================
   PRINT OPTIMIZATION
========================================================= */

@media print{

    .navbar,
    .sidebar,
    .footer,
    .btn{
        display:none !important;
    }

    body{
        background:#fff !important;
    }

    .dj-product-card,
    .dj-support-card,
    .dj-billing-card{
        box-shadow:none !important;
        border:1px solid #ddd !important;
    }

}

/* =========================================================
   FINAL ENTERPRISE MICROINTERACTIONS
========================================================= */

/* =========================================================
   GLOBAL TRANSITIONS
========================================================= */

*{
    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

/* =========================================================
   PREMIUM CARD HOVER SYSTEM
========================================================= */

.dj-card,
.dj-dashboard-card,
.dj-product-card,
.dj-product-section,
.dj-support-card,
.dj-domain-trust-card,
.dj-product-soft-card{
    transform:translateY(0);
}

.dj-card:hover,
.dj-dashboard-card:hover,
.dj-product-card:hover,
.dj-support-card:hover,
.dj-domain-trust-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 30px 60px rgba(15,23,42,0.08),
        0 10px 25px rgba(15,23,42,0.04);
}

/* =========================================================
   PREMIUM BUTTON SYSTEM
========================================================= */

.dj-btn,
.dj-product-action-btn,
.dj-domain-action-btn,
.dj-support-btn,
.dj-kb-action-btn,
.btn{
    position:relative;
    overflow:hidden;
    transform:translateY(0);
}

.dj-btn:hover,
.dj-product-action-btn:hover,
.dj-domain-action-btn:hover,
.dj-support-btn:hover,
.dj-kb-action-btn:hover,
.btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 15px 35px rgba(37,99,235,0.22);
}

.dj-btn:active,
.dj-product-action-btn:active,
.dj-domain-action-btn:active,
.dj-support-btn:active,
.dj-kb-action-btn:active,
.btn:active{
    transform:scale(.98);
}

/* =========================================================
   SHIMMER EFFECT
========================================================= */

.dj-product-action-btn::before,
.dj-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:80%;
    height:100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.25),
            transparent
        );
}

.dj-product-action-btn:hover::before,
.dj-btn:hover::before{
    animation:djShimmer 1s ease;
}

@keyframes djShimmer{
    100%{
        left:140%;
    }
}

/* =========================================================
   TABLE INTERACTIONS
========================================================= */

.dj-service-row,
.dj-ticket-row,
.dj-domain-row{
    position:relative;
}

.dj-service-row:hover,
.dj-ticket-row:hover,
.dj-domain-row:hover{
    transform:scale(1.01);
    z-index:2;
    background:#f8fafc;
}

/* =========================================================
   HERO GLOW EFFECTS
========================================================= */

.dj-page-hero,
.dj-support-header,
.dj-billing-hero{
    overflow:hidden;
}

.dj-page-hero::after,
.dj-support-header::after,
.dj-billing-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,0.12),
            transparent 35%
        );
    pointer-events:none;
}

/* =========================================================
   FLOATING ICONS
========================================================= */

.dj-floating-icon{
    animation:djFloat 5s ease-in-out infinite;
}

@keyframes djFloat{
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* =========================================================
   FADE-IN ANIMATION
========================================================= */

.dj-card,
.dj-dashboard-card,
.dj-product-card,
.dj-support-card,
.dj-product-section{
    animation:djFadeUp .5s ease;
}

@keyframes djFadeUp{

    from{
        opacity:0;
        transform:
            translateY(18px);
    }

    to{
        opacity:1;
        transform:
            translateY(0);
    }

}

/* =========================================================
   PREMIUM INPUT SYSTEM
========================================================= */

.form-control,
.custom-select,
.dj-form-control{
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.form-control:focus,
.custom-select:focus,
.dj-form-control:focus{
    transform:translateY(-1px);
    box-shadow:
        0 0 0 5px rgba(37,99,235,0.08),
        0 12px 30px rgba(37,99,235,0.08);
}

/* =========================================================
   BADGE ANIMATION
========================================================= */

.dj-badge,
.dj-glass-badge{
    animation:djPulseGlow 4s ease infinite;
}

@keyframes djPulseGlow{

    0%{
        box-shadow:0 0 0 rgba(37,99,235,0);
    }

    50%{
        box-shadow:0 0 25px rgba(37,99,235,0.12);
    }

    100%{
        box-shadow:0 0 0 rgba(37,99,235,0);
    }

}

/* =========================================================
   LOADING STATES
========================================================= */

.dj-loading{
    position:relative;
    overflow:hidden;
}

.dj-loading::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );
    animation:djLoading 1.2s infinite;
}

@keyframes djLoading{

    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(100%);
    }

}

/* =========================================================
   SCROLLBAR SYSTEM
========================================================= */

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#f1f5f9;
}

::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}

/* =========================================================
   MOBILE SAFE ANIMATIONS
========================================================= */

@media(max-width:767px){

    .dj-card:hover,
    .dj-dashboard-card:hover,
    .dj-product-card:hover,
    .dj-support-card:hover,
    .dj-domain-trust-card:hover{
        transform:none;
    }

}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}

/* =========================================================
   HEADER ENTERPRISE REFINEMENT
========================================================= */

#header{

    position:relative;
    z-index:9999;

}

/* =========================================================
   STICKY NAVBAR
========================================================= */

#header .container{

    position:relative;
    z-index:2;

}

#header .navbar-brand{

    transition:.3s ease;

}

#header .navbar-brand:hover{

    transform:translateY(-2px);

}

/* =========================================================
   NAV LINKS
========================================================= */

#header .navbar-nav .nav-link{

    position:relative;

    font-weight:700 !important;

    color:#334155 !important;

    padding:14px 18px !important;

    border-radius:14px;

    transition:.25s ease;

}

#header .navbar-nav .nav-link:hover{

    background:rgba(37,99,235,0.06);

    color:#2563eb !important;

}

#header .navbar-nav .nav-link::after{

    content:"";

    position:absolute;

    left:18px;
    right:18px;
    bottom:8px;

    height:2px;

    border-radius:999px;

    background:#2563eb;

    transform:scaleX(0);

    transition:.25s ease;

}

#header .navbar-nav .nav-link:hover::after{

    transform:scaleX(1);

}

/* =========================================================
   DROPDOWNS
========================================================= */

#header .dropdown-menu{

    border:none !important;

    border-radius:24px !important;

    padding:14px !important;

    box-shadow:
        0 30px 60px rgba(15,23,42,0.12);

    overflow:hidden;

    margin-top:18px !important;

}

#header .dropdown-item{

    border-radius:14px;

    padding:14px 18px;

    font-weight:600;

    transition:.2s ease;

}

#header .dropdown-item:hover{

    background:#f8fafc;

    color:#2563eb;

    transform:translateX(4px);

}

/* =========================================================
   CART
========================================================= */

#header a[href*="cart.php?a=view"]:hover{

    transform:
        translateY(-3px)
        scale(1.04);

    background:#2563eb !important;

    color:#fff !important;

}

/* =========================================================
   PRIMARY CTA
========================================================= */

#header a[href*="store"]{

    position:relative;

    overflow:hidden;

}

#header a[href*="store"]::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.22),
            transparent
        );

    transition:.6s ease;

}

#header a[href*="store"]:hover::before{

    left:120%;

}

#header a[href*="store"]:hover{

    transform:translateY(-3px);

    box-shadow:
        0 25px 50px rgba(34,197,94,0.28) !important;

}

/* =========================================================
   MOBILE MENU
========================================================= */

#mainNavbar{

    border-top:none !important;

    box-shadow:
        0 20px 40px rgba(15,23,42,0.08);

}

#mainNavbar .nav-link{

    border-radius:16px;

    margin-bottom:6px;

}

/* =========================================================
   MOBILE TOGGLE
========================================================= */

#header button[data-target="#mainNavbar"]{

    transition:.25s ease;

}

#header button[data-target="#mainNavbar"]:hover{

    background:#2563eb !important;

    color:#fff;

    transform:scale(1.05);

}

/* =========================================================
   CLIENT BAR
========================================================= */

#accountNotifications{

    transition:.25s ease;

}

#accountNotifications:hover{

    background:rgba(255,255,255,0.14) !important;

    transform:translateY(-2px);

}

/* =========================================================
   BREADCRUMB
========================================================= */

.master-breadcrumb{

    backdrop-filter:blur(10px);

}

/* =========================================================
   SCROLL SHADOW
========================================================= */

#header > div:nth-child(3){

    box-shadow:
        0 8px 30px rgba(15,23,42,0.04);

}

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

@media(max-width:1199px){

    #header .navbar-brand img{

        max-height:42px !important;

    }

}

@media(max-width:767px){

    #header .navbar-brand img{

        max-height:36px !important;

    }

}