/* ==========================================================
   KITWICK — REGISTER DOMAIN
   FINAL DOMAIN PAGE CSS
   Matches Pricing / Web Hosting visual system
   ========================================================== */

.lhuk-domain-page{
    --lhuk-bg:#ffffff;
    --lhuk-surface:#f3f3f8;
    --lhuk-surface-soft:#f7f7fa;
    --lhuk-surface-purple:#f0edfb;
    --lhuk-text:#17182f;
    --lhuk-text-soft:#70758e;
    --lhuk-text-muted:#85899d;
    --lhuk-border:#d9d9e5;
    --lhuk-border-strong:#c8c8da;
    --lhuk-purple:#8064ed;
    --lhuk-purple-bright:#9278ff;
    --lhuk-purple-soft:rgba(128,100,237,.12);
    --lhuk-table-line:rgba(25,27,55,.10);

    position:relative;
    width:100vw !important;
    max-width:none !important;
    left:50%;
    margin-left:-50vw !important;
    margin-right:0 !important;
    padding:0 !important;

    background:var(--lhuk-bg);
    color:var(--lhuk-text);

    font-family:"Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow:hidden;
}

.lhuk-domain-page *,
.lhuk-domain-page *::before,
.lhuk-domain-page *::after{
    box-sizing:border-box;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html.dark .lhuk-domain-page,
html.dark-mode .lhuk-domain-page,
html.theme-dark .lhuk-domain-page,
html[data-theme="dark"] .lhuk-domain-page,
html[data-mode="dark"] .lhuk-domain-page,
body.dark .lhuk-domain-page,
body.dark-mode .lhuk-domain-page,
body.theme-dark .lhuk-domain-page,
body[data-theme="dark"] .lhuk-domain-page,
body[data-mode="dark"] .lhuk-domain-page,
.lhuk-domain-page[data-lhuk-theme="dark"]{

    --lhuk-bg:#141522;
    --lhuk-surface:#202330;
    --lhuk-surface-soft:#222532;
    --lhuk-surface-purple:#29283d;

    --lhuk-text:#f3f2fa;
    --lhuk-text-soft:#989caf;
    --lhuk-text-muted:#85899e;

    --lhuk-border:#383b49;
    --lhuk-border-strong:#414452;

    --lhuk-purple:#9a7cff;
    --lhuk-purple-bright:#a78cff;
    --lhuk-purple-soft:rgba(154,124,255,.16);

    --lhuk-table-line:rgba(177,177,208,.11);

    background:#141522;
}


/* ==========================================================
   REMOVE DEFAULT WHMCS TOP SPACING
   ========================================================== */

#main-body{
    padding-top:0 !important;
}

section#main-body.main-body{
    padding-top:0 !important;
}

#main-body > .container{
    padding-top:0 !important;
}


/* ==========================================================
   DOMAIN PAGE CONTAINER
   Same width as Pricing / Web Hosting
   ========================================================== */

.lhuk-domain-container{
    width:min(1160px,calc(100% - 48px)) !important;
    max-width:1160px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:0 !important;
    padding-right:0 !important;
}


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

.lhuk-domain-hero{
    width:100%;
    padding:72px 0 52px;

    background:var(--lhuk-bg);
}


/* ----------------------------------------------------------
   HERO PILL
   ---------------------------------------------------------- */

.lhuk-domain-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 15px;
    margin-bottom:20px;

    border-radius:999px;

    background:var(--lhuk-purple-soft);
    color:var(--lhuk-purple);

    font-size:12px;
    font-weight:700;
    line-height:1;

    letter-spacing:.06em;
}


/* ----------------------------------------------------------
   HERO TITLE
   ---------------------------------------------------------- */

.lhuk-domain-hero h1{
    max-width:950px;

    margin:0;

    color:var(--lhuk-text);

    font-size:64px;
    line-height:1.05;
    font-weight:400;

    letter-spacing:-.045em;
}


/* ----------------------------------------------------------
   HERO INTRO
   ---------------------------------------------------------- */

.lhuk-domain-intro{
    max-width:760px;

    margin:25px 0 0;

    color:var(--lhuk-text-soft);

    font-size:17px;
    line-height:1.6;
}


/* ----------------------------------------------------------
   HERO SUB INTRO
   ---------------------------------------------------------- */

.lhuk-domain-subintro{
    max-width:760px;

    margin:3px 0 0;

    color:var(--lhuk-text);

    font-size:14px;
    line-height:1.65;
}


/* ==========================================================
   DOMAIN SEARCH
   ========================================================== */

.lhuk-domain-search-card{
    width:100%;
    max-width:935px;

    margin-top:34px;
    padding:9px;

    border:1px solid var(--lhuk-border);
    border-radius:24px;

    background:var(--lhuk-surface-soft);
}


.lhuk-domain-search-form{
    width:100%;
    margin:0;
}


.lhuk-domain-search-row{
    display:flex;
    align-items:stretch;

    gap:9px;

    width:100%;
}


/* ----------------------------------------------------------
   SEARCH INPUT
   ---------------------------------------------------------- */

.lhuk-domain-search-input{
    flex:1 1 auto;

    width:100%;
    min-width:0;
    min-height:58px;

    padding:0 18px;

    border:1px solid var(--lhuk-border);
    border-radius:17px;

    outline:none;

    background:var(--lhuk-bg);
    color:var(--lhuk-text);

    font-family:inherit;
    font-size:15px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.lhuk-domain-search-input::placeholder{
    color:var(--lhuk-text-muted);
}


.lhuk-domain-search-input:focus{
    border-color:var(--lhuk-purple);

    box-shadow:
        0 0 0 3px var(--lhuk-purple-soft);
}


/* ----------------------------------------------------------
   SEARCH BUTTON
   ---------------------------------------------------------- */

.lhuk-domain-search-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    flex:0 0 135px;

    min-width:135px;
    min-height:58px;

    padding:0 22px;

    border:0;
    border-radius:17px;

    background:var(--lhuk-purple);
    color:#fff;

    font-family:inherit;
    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        opacity .2s ease;
}


.lhuk-domain-search-btn:hover{
    background:var(--lhuk-purple-bright);

    transform:translateY(-1px);
}


.lhuk-domain-search-btn:disabled{
    opacity:.7;
    cursor:wait;
    transform:none;
}


.lhuk-search-button-text{
    display:inline-block;
}


/* ==========================================================
   SEARCH RESULT
   GREEN = AVAILABLE
   RED   = UNAVAILABLE
   ========================================================== */

.lhuk-domain-result{
    display:none;

    width:100%;

    margin-top:12px;
    padding:0;
}


.lhuk-domain-result.is-loading,
.lhuk-domain-result.is-error,
.lhuk-domain-result.is-available,
.lhuk-domain-result.is-unavailable{
    display:block;
}


/* ----------------------------------------------------------
   COMMON RESULT BOX
   ---------------------------------------------------------- */

.lhuk-domain-result-content{
    display:flex;
    align-items:center;

    gap:14px;

    width:100%;
    min-height:72px;

    padding:14px 16px;

    border:1px solid var(--lhuk-border);
    border-radius:17px;

    background:var(--lhuk-bg);
}


/* ==========================================================
   AVAILABLE RESULT — GREEN
   ========================================================== */

.lhuk-domain-result.is-available
.lhuk-domain-result-content{

    border:1px solid rgba(47,190,125,.65);

    background:rgba(47,190,125,.055);

    box-shadow:
        inset 3px 0 0 #2fbe7d;
}


.lhuk-domain-result.is-available
.lhuk-domain-result-icon{

    background:rgba(47,190,125,.14);

    color:#2fbe7d;
}


.lhuk-domain-result.is-available
.lhuk-domain-result-copy strong{

    color:#2fbe7d;
}


/* ==========================================================
   UNAVAILABLE RESULT — RED
   ========================================================== */

.lhuk-domain-result.is-unavailable
.lhuk-domain-result-content{

    border:1px solid rgba(235,87,87,.65);

    background:rgba(235,87,87,.055);

    box-shadow:
        inset 3px 0 0 #eb5757;
}


.lhuk-domain-result.is-unavailable
.lhuk-domain-result-icon{

    background:rgba(235,87,87,.14);

    color:#eb5757;
}


.lhuk-domain-result.is-unavailable
.lhuk-domain-result-copy strong{

    color:#eb5757;
}


/* ----------------------------------------------------------
   RESULT ICON
   ---------------------------------------------------------- */

.lhuk-domain-result-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 36px;

    width:36px;
    height:36px;

    border-radius:50%;

    font-size:13px;
}


/* ----------------------------------------------------------
   RESULT TEXT
   ---------------------------------------------------------- */

.lhuk-domain-result-copy{
    display:flex;
    flex-direction:column;

    gap:3px;

    min-width:0;

    flex:1;
}


.lhuk-domain-result-copy strong{
    color:var(--lhuk-text);

    font-size:14px;
    line-height:1.35;

    font-weight:600;
}


.lhuk-domain-result-copy span{
    color:var(--lhuk-text-soft);

    font-size:12px;
    line-height:1.4;
}


/* ----------------------------------------------------------
   REGISTER RESULT BUTTON
   ---------------------------------------------------------- */

.lhuk-domain-register-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    min-height:40px;

    padding:0 18px;

    border:1px solid var(--lhuk-purple);
    border-radius:999px;

    background:var(--lhuk-purple);

    color:#fff !important;

    font-size:12px;
    font-weight:600;

    text-decoration:none !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.lhuk-domain-register-btn:hover{
    background:var(--lhuk-purple-bright);

    border-color:var(--lhuk-purple-bright);

    color:#fff !important;

    transform:translateY(-1px);
}


/* ==========================================================
   SEARCH LOADING
   ========================================================== */

.lhuk-domain-result.is-loading{

    padding:14px 16px;

    border:1px solid var(--lhuk-border);
    border-radius:16px;

    background:var(--lhuk-surface-soft);

    color:var(--lhuk-text-soft);

    font-size:12px;
}


.lhuk-search-spinner,
.lhuk-result-spinner{
    display:none;

    width:15px;
    height:15px;

    margin-right:8px;

    vertical-align:-3px;

    border:2px solid rgba(128,100,237,.20);
    border-top-color:var(--lhuk-purple);

    border-radius:50%;

    animation:lhukDomainSpin .7s linear infinite;
}


.lhuk-domain-result.is-loading
.lhuk-result-spinner{
    display:inline-block;
}


@keyframes lhukDomainSpin{
    to{
        transform:rotate(360deg);
    }
}


/* ==========================================================
   SEARCH ERROR
   ========================================================== */

.lhuk-domain-result.is-error{

    padding:14px 16px;

    border:1px solid rgba(235,87,87,.55);

    border-radius:16px;

    background:rgba(235,87,87,.06);

    color:#eb5757;

    font-size:12px;

    box-shadow:
        inset 3px 0 0 #eb5757;
}


/* ==========================================================
   POPULAR EXTENSIONS
   ========================================================== */

.lhuk-domain-popular{
    width:100%;

    padding:18px 0 38px;

    background:var(--lhuk-bg);
}


/* ----------------------------------------------------------
   POPULAR HEADING
   ---------------------------------------------------------- */

.lhuk-domain-section-heading{
    display:grid;

    grid-template-columns:1fr 1.5fr 1fr;

    align-items:center;

    gap:25px;
}


.lhuk-domain-kicker{
    display:block;

    color:var(--lhuk-purple);

    font-size:10px;
    line-height:1;

    font-weight:700;

    letter-spacing:.20em;

    text-transform:uppercase;
}


.lhuk-domain-section-heading h2{
    margin:0;

    color:var(--lhuk-text);

    font-size:27px;
    line-height:1.2;

    font-weight:400;

    letter-spacing:-.025em;

    text-align:center;
}


.lhuk-domain-section-heading p{
    max-width:420px;

    margin:0 0 0 auto;

    color:var(--lhuk-text-soft);

    font-size:13px;
    line-height:1.7;

    text-align:right;
}


/* ==========================================================
   POPULAR EXTENSION GRID

   IMPORTANT:
   This matches register-domain.tpl:
   .lhuk-domain-popular-grid
   ========================================================== */

.lhuk-domain-popular-grid{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:15px;

    width:100%;

    margin-top:25px;
}


/* ==========================================================
   EXTENSION CARD
   ========================================================== */

.lhuk-domain-extension-card{

    display:flex;
    flex-direction:column;

    min-width:0;
    min-height:210px;

    overflow:hidden;

    border:1px solid var(--lhuk-border);

    border-radius:26px;

    background:var(--lhuk-surface-soft);

    text-decoration:none !important;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.lhuk-domain-extension-card:hover{

    transform:translateY(-3px);

    border-color:var(--lhuk-purple-bright);

    box-shadow:
        0 12px 30px rgba(0,0,0,.10);
}


/* ----------------------------------------------------------
   EXTENSION NAME
   ---------------------------------------------------------- */

.lhuk-domain-extension-logo{

    display:flex;

    align-items:center;
    justify-content:center;

    flex:1;

    min-height:135px;

    color:var(--lhuk-text);
}


.lhuk-domain-extension-logo span{

    font-size:25px;

    line-height:1;

    font-weight:400;

    letter-spacing:-.03em;
}


/* ----------------------------------------------------------
   EXTENSION PRICE
   ---------------------------------------------------------- */

.lhuk-domain-extension-price{

    padding:0 20px 5px;

    color:var(--lhuk-text);

    font-size:16px;

    line-height:1.3;

    font-weight:500;
}


.lhuk-domain-extension-price span{

    margin-left:2px;

    color:var(--lhuk-text-soft);

    font-size:11px;

    font-weight:400;
}


/* ----------------------------------------------------------
   REGISTER LINK
   ---------------------------------------------------------- */

.lhuk-domain-extension-btn{

    display:block;

    padding:0 20px 19px;

    color:var(--lhuk-purple) !important;

    font-size:12px;

    font-weight:600;

    text-decoration:none !important;
}


.lhuk-domain-extension-btn:hover{

    color:var(--lhuk-purple-bright) !important;
}


/* ==========================================================
   DOMAIN RESULTS
   ========================================================== */

.lhuk-domain-results{

    width:100%;

    padding:0 0 25px;

    background:var(--lhuk-bg);
}


/* ==========================================================
   DOMAIN PRICING
   ========================================================== */

.lhuk-domain-pricing-section{

    width:100%;

    padding:38px 0 30px;

    background:var(--lhuk-bg);
}


/* ----------------------------------------------------------
   PRICING HEADING
   ---------------------------------------------------------- */

.lhuk-domain-pricing-heading{

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    align-items:center;

    gap:20px;
}


.lhuk-domain-pricing-heading h2{

    margin:0;

    color:var(--lhuk-text);

    font-size:30px;

    line-height:1.2;

    font-weight:400;

    letter-spacing:-.03em;

    text-align:center;
}


.lhuk-domain-pricing-heading p{

    margin:0;

    color:var(--lhuk-text-soft);

    font-size:13px;

    line-height:1.6;

    text-align:right;
}


/* ==========================================================
   DOMAIN TABLE
   ========================================================== */

.lhuk-domain-table-wrap{

    width:100%;

    margin-top:25px;

    overflow-x:auto;

    border-radius:0;
}


.lhuk-domain-table{

    width:100%;

    min-width:650px;

    border-collapse:collapse;

    table-layout:fixed;

    color:var(--lhuk-text);
}


.lhuk-domain-table th,
.lhuk-domain-table td{

    border-bottom:
        1px solid var(--lhuk-table-line);
}


/* ----------------------------------------------------------
   TABLE HEAD
   ---------------------------------------------------------- */

.lhuk-domain-table th{

    padding:0 0 14px;

    color:var(--lhuk-text-muted);

    font-size:10px;

    line-height:1.2;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    text-align:left;
}


.lhuk-domain-table th:first-child{

    width:28%;
}


.lhuk-domain-table th:not(:first-child){

    text-align:center;
}


/* ----------------------------------------------------------
   TABLE CELLS
   ---------------------------------------------------------- */

.lhuk-domain-table td{

    padding:17px 0;

    color:var(--lhuk-text-soft);

    font-size:13px;

    line-height:1.4;
}


.lhuk-domain-table td:first-child{

    color:var(--lhuk-text);

    text-align:left;
}


.lhuk-domain-table td:not(:first-child){

    text-align:center;
}


.lhuk-domain-table td strong{

    color:var(--lhuk-text);

    font-size:13px;

    font-weight:600;
}


.lhuk-domain-table td small{

    display:inline;

    margin-left:3px;

    color:var(--lhuk-text-soft);

    font-size:10px;
}


/* ==========================================================
   CTA SECTION
   ========================================================== */

.lhuk-domain-cta{

    width:100%;

    padding:30px 0 68px;

    background:var(--lhuk-bg);
}


/* ----------------------------------------------------------
   CTA GRID
   ---------------------------------------------------------- */

.lhuk-domain-cta-grid{

    display:grid;

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

    gap:15px;

    width:100%;
}


/* ----------------------------------------------------------
   CTA CARD
   ---------------------------------------------------------- */

.lhuk-domain-cta-card{

    min-width:0;

    min-height:250px;

    padding:35px;

    border:1px solid var(--lhuk-border);

    border-radius:30px;

    background:var(--lhuk-surface-purple);
}


/* ----------------------------------------------------------
   CTA KICKER
   ---------------------------------------------------------- */

.lhuk-domain-cta-card .lhuk-domain-kicker{

    margin-bottom:0;
}


/* ----------------------------------------------------------
   CTA TITLE
   ---------------------------------------------------------- */

.lhuk-domain-cta-card h2{

    margin:14px 0 9px;

    color:var(--lhuk-text);

    font-size:27px;

    line-height:1.2;

    font-weight:400;

    letter-spacing:-.025em;
}


/* ----------------------------------------------------------
   CTA TEXT
   ---------------------------------------------------------- */

.lhuk-domain-cta-card p{

    max-width:500px;

    margin:0;

    color:var(--lhuk-text-soft);

    font-size:13px;

    line-height:1.7;
}


/* ----------------------------------------------------------
   CTA BUTTON
   ---------------------------------------------------------- */

.lhuk-domain-cta-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    min-height:44px;

    margin-top:23px;

    padding:0 19px;

    border:1px solid var(--lhuk-purple);

    border-radius:999px;

    background:transparent;

    color:var(--lhuk-purple) !important;

    font-size:12px;

    font-weight:600;

    text-decoration:none !important;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.lhuk-domain-cta-btn:hover{

    background:var(--lhuk-purple);

    color:#fff !important;

    transform:translateY(-1px);
}


/* ==========================================================
   WHMCS DEFAULT ELEMENT OVERRIDES
   ========================================================== */

.lhuk-domain-page .row{

    margin-left:0;
    margin-right:0;
}


.lhuk-domain-page .container{

    padding-left:0;
    padding-right:0;
}


.lhuk-domain-page .form-control{

    box-shadow:none;
}


/* ==========================================================
   TABLE / CARD LINKS
   ========================================================== */

.lhuk-domain-page a{

    transition:
        color .2s ease,
        opacity .2s ease;
}


.lhuk-domain-page a:focus{

    outline:none;
}


/* ==========================================================
   RESPONSIVE — 1050px
   ========================================================== */

@media (max-width:1050px){

    .lhuk-domain-popular-grid{

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

}


/* ==========================================================
   RESPONSIVE — 800px
   ========================================================== */

@media (max-width:800px){

    .lhuk-domain-container{

        width:min(
            calc(100% - 40px),
            760px
        ) !important;
    }


    .lhuk-domain-hero{

        padding:52px 0 34px;
    }


    .lhuk-domain-hero h1{

        font-size:46px;
    }


    .lhuk-domain-section-heading{

        display:block;
    }


    .lhuk-domain-section-heading h2{

        margin-top:14px;

        text-align:left;
    }


    .lhuk-domain-section-heading p{

        margin-top:10px;

        text-align:left;
    }


    .lhuk-domain-pricing-heading{

        display:block;
    }


    .lhuk-domain-pricing-heading h2{

        text-align:left;
    }


    .lhuk-domain-pricing-heading p{

        margin-top:10px;

        text-align:left;
    }


    .lhuk-domain-cta-grid{

        grid-template-columns:1fr;
    }

}


/* ==========================================================
   RESPONSIVE — 600px
   ========================================================== */

@media (max-width:600px){

    .lhuk-domain-container{

        width:
            calc(100% - 28px) !important;
    }


    .lhuk-domain-hero{

        padding-top:42px;
    }


    .lhuk-domain-hero h1{

        font-size:40px;
    }


    .lhuk-domain-intro{

        font-size:14px;
    }


    /* ------------------------------------------------------
       SEARCH
       ------------------------------------------------------ */

    .lhuk-domain-search-card{

        margin-top:27px;

        padding:7px;

        border-radius:20px;
    }


    .lhuk-domain-search-row{

        display:block;
    }


    .lhuk-domain-search-input{

        min-height:54px;

        font-size:14px;
    }


    .lhuk-domain-search-btn{

        width:100%;

        min-height:54px;

        margin-top:8px;
    }


    /* ------------------------------------------------------
       RESULT
       ------------------------------------------------------ */

    .lhuk-domain-result-content{

        align-items:flex-start;

        flex-wrap:wrap;

        padding:14px;
    }


    .lhuk-domain-result-copy{

        flex:
            1 1 calc(100% - 55px);
    }


    .lhuk-domain-register-btn{

        width:100%;

        margin-top:3px;
    }


    /* ------------------------------------------------------
       POPULAR
       ------------------------------------------------------ */

    .lhuk-domain-popular{

        padding-top:30px;
    }


    .lhuk-domain-popular-grid{

        grid-template-columns:1fr;

        margin-top:20px;
    }


    .lhuk-domain-extension-card{

        min-height:180px;
    }


    .lhuk-domain-extension-logo{

        min-height:110px;
    }


    /* ------------------------------------------------------
       PRICING
       ------------------------------------------------------ */

    .lhuk-domain-pricing-section{

        padding:30px 0 20px;
    }


    .lhuk-domain-table{

        min-width:650px;
    }


    /* ------------------------------------------------------
       CTA
       ------------------------------------------------------ */

    .lhuk-domain-cta{

        padding:25px 0 45px;
    }


    .lhuk-domain-cta-card{

        min-height:0;

        padding:28px 22px;

        border-radius:25px;
    }


    .lhuk-domain-cta-card h2{

        font-size:24px;
    }

}


/* ==========================================================
   REDUCE MOTION
   ========================================================== */

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

    .lhuk-domain-extension-card,
    .lhuk-domain-search-btn,
    .lhuk-domain-register-btn,
    .lhuk-domain-cta-btn{

        transition:none;
    }


    .lhuk-domain-extension-card:hover,
    .lhuk-domain-search-btn:hover,
    .lhuk-domain-register-btn:hover,
    .lhuk-domain-cta-btn:hover{

        transform:none;
    }


    .lhuk-search-spinner,
    .lhuk-result-spinner{

        animation:none;
    }

}