/* =========================================
   DAZZLE HOSTING WHMCS THEME
   CLEAN LIGHT VERSION
   ========================================= */

:root {

    --primary: #350E5E;
    --primary-hover: #4b1785;

    --accent: #61CE70;

    --border: rgba(255,255,255,0.08);

    --transition: .25s ease;
}

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

body {

    font-family:
        Inter,
        Arial,
        sans-serif;

}

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

#header,
.navbar,
.navbar-main,
.main-navbar-wrapper,
.topbar {

    background:
        linear-gradient(
            135deg,
            #350E5E 0%,
            #24103d 100%
        ) !important;

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

    box-shadow:
        0 8px 30px rgba(0,0,0,0.18);

}

/* =========================================
LOGO
========================================= */

.navbar-brand img {

    max-height: 48px;

}

/* =========================================
MENU LINKS
MATCH MAIN WEBSITE
========================================= */

.navbar-nav > li > a,
.nav-link,
.navbar-light .navbar-nav .nav-link {

    color: #ffffff !important;

    font-weight: 600;

    font-size: 15px;

    padding: 12px 16px !important;

    line-height: 1.2;

    transition:
        opacity .2s ease;

}

/* ---------- MENU HOVER ---------- */

.navbar-nav > li > a:hover,
.nav-link:hover {

    color: #ffffff !important;

    opacity: .82;

}

/* ---------- ACTIVE ---------- */

.navbar-nav > .active > a,
.navbar-nav > .active > .nav-link {

    color: #ffffff !important;

    opacity: 1;

}

/* =========================================
MENU CAPTIONS
========================================= */

.menu-caption {

    display: block;

    font-size: 12px;

    line-height: 1.0;

    opacity: 0.75;

    font-weight: 400;

    margin-top: 2px;

}

/* =========================================
DROPDOWN MENUS
MATCH MAIN WEBSITE
========================================= */

.dropdown-menu {

    background:
        linear-gradient(
            180deg,
            rgba(36,16,61,0.98) 0%,
            rgba(27,16,45,0.98) 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,0.06) !important;

    border-radius: 16px !important;

    padding: 8px !important;

    min-width: 320px;

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.38);

}

/* ---------- REMOVE EXTRA SPACING ---------- */

.dropdown-menu li,
.dropdown-menu .dropdown-item {

    margin: 0 !important;

}

/* ---------- DROPDOWN LINKS ---------- */

.dropdown-menu a,
.dropdown-item {

    color: #ffffff !important;

    padding:
        14px 18px !important;

    border-radius: 10px !important;

    font-weight: 500;

    font-size: 14px;

    line-height: 1.2;

    transition: all .2s ease;

    margin: 0 !important;

}

/* ---------- DROPDOWN HOVER ---------- */

.dropdown-menu a:hover,
.dropdown-item:hover {

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

    color: #ffffff !important;

}

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

.btn-primary,
button.btn-primary,
.btn-success,
.btn-info {

    background: #61CE70 !important;

    border: none !important;

    color: #000000 !important;

    border-radius: 12px;

    font-weight: 700;

    padding:
        12px 24px;

    transition: all .25s ease;

}

/* ---------- BUTTON HOVER ---------- */

.btn-primary:hover,
button.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {

    background: #7cdb89 !important;

    color: #000000 !important;

    transform:
        translateY(-2px);

}

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

.btn-secondary,
.btn-default,
.btn-sm {

    border-radius: 12px;

}

/* =========================================
FOOTER
========================================= */

#footer,
.footer {

    background:
        linear-gradient(
            180deg,
            #140824 0%,
            #0d0518 100%
        ) !important;

    border-top:
        1px solid rgba(255,255,255,0.06);

    color: #ffffff !important;

    margin-top: 70px;

}

/* ---------- FOOTER TEXT ---------- */

#footer,
#footer p,
#footer span,
#footer li,
#footer div {

    color: rgba(255,255,255,0.72) !important;

}

/* ---------- FOOTER LINKS ---------- */

#footer a,
.footer a {

    color:
        rgba(255,255,255,0.72) !important;

}

#footer a:hover,
.footer a:hover {

    color: #ffffff !important;

}

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

@media (max-width: 768px) {

    .navbar-nav > li > a {

        padding:
            12px 14px !important;

    }

}







/* =========================================
DOMAIN SEARCH SECTION
FINAL COMPLETE SECTION
========================================= */

.container .p-5.clearfix {

    background:
        linear-gradient(
            135deg,
            #350E5E 0%,
            #24103d 100%
        );

    border-radius: 24px;

    padding: 40px !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.18);

    border:
        1px solid rgba(255,255,255,0.06);

}

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

.container .p-5.clearfix h2 {

    color: #ffffff !important;

    font-size: 42px;

    font-weight: 700;

    margin-bottom: 30px;

}

/* =========================================
SEARCH PANEL
========================================= */

.advanced-input {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

}

/* =========================================
TEXTAREA
========================================= */

.advanced-input textarea {

    flex: 0 0 100%;

    width: 100%;

    min-height: 140px;

    background: #ffffff !important;

    border: none !important;

    border-radius: 18px !important;

    padding: 22px !important;

    color: #111111 !important;

    font-size: 16px;

    line-height: 1.7;

    resize: vertical;

    margin-bottom: 10px;

    box-shadow: none !important;

}

/* ---------- PLACEHOLDER ---------- */

.advanced-input textarea::placeholder {

    color: #666666 !important;

}

/* ---------- FOCUS ---------- */

.advanced-input textarea:focus {

    outline: none !important;

    box-shadow:
        0 0 0 4px rgba(97,206,112,0.15) !important;

}

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

.multiselect.dropdown-toggle,
.advanced-input .btn-default {

    background: #ffffff !important;

    border:
        1px solid #dddddd !important;

    color: #111111 !important;

    border-radius: 12px !important;

    padding:
        12px 18px !important;

    min-height: 48px;

    box-shadow: none !important;

}

/* ---------- DROPDOWN TEXT ---------- */

.multiselect-selected-text,
.multiselect .caret {

    color: #111111 !important;

}

/* =========================================
DROPDOWN MENU
========================================= */

.multiselect-container.dropdown-menu {

    background: #ffffff !important;

    border:
        1px solid #dddddd !important;

    border-radius: 14px !important;

    padding: 8px !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.15);

}

/* ---------- OPTIONS ---------- */

.multiselect-container li a {

    color: #111111 !important;

    border-radius: 10px;

    padding:
        10px 14px !important;

    transition: .2s ease;

}

/* ---------- OPTION HOVER ---------- */

.multiselect-container li a:hover {

    background:
        rgba(53,14,94,0.08) !important;

    color: #111111 !important;

}

/* ---------- LABELS ---------- */

.multiselect-container label {

    color: #111111 !important;

}

/* =========================================
SAFE SEARCH
========================================= */

.advanced-input label {

    color:
        rgba(255,255,255,0.9);

    font-size: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

}

/* =========================================
BUTTON GROUP
========================================= */

.input-group-append {

    white-space: nowrap;

}

.input-group-append .btn {

    margin-left: 10px;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

}

/* =========================================
SEARCH BUTTON
========================================= */

#btnDomainSearch,
#btnDomainSearch2 {

    background: #61CE70 !important;

    border: none !important;

    color: #000000 !important;

    font-weight: 700;

    border-radius: 14px !important;

    padding:
        14px 28px !important;

    min-height: 50px;

    box-shadow:
        0 10px 25px rgba(97,206,112,0.2);

    transition: .25s ease;

}

/* ---------- HOVER ---------- */

#btnDomainSearch:hover,
#btnDomainSearch2:hover {

    background: #7cdb89 !important;

    transform:
        translateY(-2px);

}

/* =========================================
TRANSFER BUTTON
========================================= */

#btnTransfer,
#btnTransfer2 {

    background: #ffffff !important;

    border:
        1px solid rgba(255,255,255,0.25) !important;

    color: #111111 !important;

    font-weight: 600;

    border-radius: 14px !important;

    padding:
        14px 24px !important;

    min-height: 50px;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    transition: .25s ease;

}

/* ---------- HOVER ---------- */

#btnTransfer:hover,
#btnTransfer2:hover {

    background:
        #f5f5f5 !important;

}

/* =========================================
CAPTCHA AREA
========================================= */

.domainchecker-homepage-captcha {

    margin-top: 28px;

    background:
        rgba(255,255,255,0.05);

    border-radius: 18px;

    padding: 24px;

}

/* =========================================
CAPTCHA INPUT
========================================= */

#inputCaptcha {

    background: #ffffff !important;

    border: none !important;

    color: #111111 !important;

    border-radius: 12px !important;

}

/* =========================================
CAPTCHA TEXT
========================================= */

#default-captcha-domainchecker p {

    color:
        rgba(255,255,255,0.82) !important;

}

/* =========================================
VIEW ALL PRICING
========================================= */

.btn-link.btn-sm.float-right {

    color:
        rgba(255,255,255,0.78) !important;

    margin-top: 18px;

}

.btn-link.btn-sm.float-right:hover {

    color: #ffffff !important;

}

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

@media (max-width: 768px) {

    .container .p-5.clearfix {

        padding: 24px !important;

        border-radius: 18px;

    }

    .advanced-input textarea {

        min-height: 120px;

        padding: 18px !important;

    }

    .container .p-5.clearfix h2 {

        font-size: 32px;

    }

    .input-group-append {

        width: auto;

    }

}

/* Hide original WHMCS logo */

.logo-img {

    opacity: 0;

    width: 220px;

    height: 42px;

}

/* Replace with Dazzle Hosting logo */

.navbar-brand {

    position: relative;

    display: flex;

    align-items: center;

}

.navbar-brand::before {

    content: "";

    width: 220px;

    height: 42px;

    display: block;

    background-image:
        url("https://www.dazzlehosting.co.uk/wp-content/uploads/2026/05/xdazzle-logo-100x60.webp.pagespeed.ic.Y_yYd3Leyl.webp");

    background-size: contain;

    background-repeat: no-repeat;

    background-position: left center;

}