/* =========================================================
   DUNEHOST — CLIENT REGISTRATION
   ========================================================= */

body.dh-register-body {
    margin: 0;

    background: #050605;

    color: #f5f2eb;
}


/* ---------------------------------------------------------
   REMOVE STANDARD WHMCS HEADER/NAV
   --------------------------------------------------------- */

body.dh-register-body #header,
body.dh-register-body #nav {
    display: none !important;
}


body.dh-register-body #main-body {
    position: relative;

    min-height: 100vh;

    margin: 0 !important;

    padding:
        0
        0
        285px !important;

    box-sizing: border-box;

    background: #050605 !important;
}


/* ---------------------------------------------------------
   DUNES
   --------------------------------------------------------- */

body.dh-register-body
#main-body::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 300px;

    background:
        url("/templates/dunehost/img/dunehost/dunehost-dunes.webp")
        center bottom / 100% auto
        no-repeat;

    filter:
        brightness(1.35)
        saturate(1.08)
        contrast(1.04);

    opacity: .98;

    pointer-events: none;

    z-index: 0;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.30) 14%,
            #000 35%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.30) 14%,
            #000 35%,
            #000 100%
        );
}


body.dh-register-body
#main-body > .container {
    position: relative;

    z-index: 1;

    width:
        min(1100px, calc(100% - 48px));

    max-width: none;

    margin: 0 auto;

    padding: 0;
}


/* ---------------------------------------------------------
   TOP BAR
   --------------------------------------------------------- */

.dh-register-topbar {
    display: flex;

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

    min-height: 88px;

    margin-bottom: 30px;

    padding:
        10px
        0;

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


.dh-register-logo img {
    display: block;

    width: auto;
    height: 64px;
}


.dh-register-topbar-actions {
    display: flex;

    align-items: center;

    gap: 26px;
}


.dh-register-topbar-actions a {
    color:
        rgba(255,255,255,.58);

    font-size:
        .84rem;

    text-decoration: none;
}


.dh-register-topbar-actions a:hover {
    color: #e5a02a;
}


.dh-register-topbar-actions
.dh-register-login-link {
    padding:
        10px
        16px;

    border:
        1px solid
        rgba(229,160,42,.55);

    border-radius: 4px;

    color: #e5a02a;
}


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

.dh-register-intro {
    margin:
        0
        auto
        30px;

    text-align: center;
}


.dh-register-intro h1 {
    margin: 0;

    color: #f7f4ed;

    font-size:
        2.8rem;

    font-weight: 600;
}


.dh-register-divider {
    display: block;

    width: 46px;
    height: 1px;

    margin:
        17px
        auto
        16px;

    background: #e5a02a;
}


.dh-register-intro p {
    margin: 0;

    color:
        rgba(255,255,255,.50);
}


/* ---------------------------------------------------------
   FORM WIDTH
   --------------------------------------------------------- */

body.dh-register-body
#registration {
    width:
        min(900px, 100%);

    margin:
        0
        auto;
}


/* ---------------------------------------------------------
   SECTION HEADINGS
   --------------------------------------------------------- */

body.dh-register-body
#registration
.sub-heading {
    height: auto !important;

    margin:
        34px
        0
        21px !important;

    border: 0 !important;

    text-align:
        left !important;
}


body.dh-register-body
#registration
.sub-heading span {
    position: static !important;

    display: block !important;

    padding:
        0
        0
        11px !important;

    border-bottom:
        1px solid
        rgba(229,160,42,.50);

    background:
        transparent !important;

    color:
        #f5f2eb !important;

    font-size:
        1rem !important;

    font-weight: 600;

    text-align: left;
}


/* ---------------------------------------------------------
   FIELDS
   --------------------------------------------------------- */

body.dh-register-body
#registration
.form-group {
    margin-bottom:
        13px;
}


body.dh-register-body
#registration
.form-control,

body.dh-register-body
#registration
.field,

body.dh-register-body
#registration
select,

body.dh-register-body
#registration
textarea {
    width: 100%;

    min-height:
        46px;

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

    border-radius:
        4px !important;

    background:
        #0c0d0c !important;

    color:
        #f5f2eb !important;

    box-shadow:
        none !important;

    color-scheme:
        dark;
}


body.dh-register-body
#registration
.form-control:focus,

body.dh-register-body
#registration
.field:focus,

body.dh-register-body
#registration
select:focus,

body.dh-register-body
#registration
textarea:focus {
    border-color:
        rgba(229,160,42,.68) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 1px
        rgba(229,160,42,.06) !important;
}


body.dh-register-body
#registration
.form-control::placeholder,

body.dh-register-body
#registration
.field::placeholder {
    color:
        rgba(255,255,255,.29) !important;
}


/* Autofill */
body.dh-register-body
#registration
input:-webkit-autofill,

body.dh-register-body
#registration
input:-webkit-autofill:hover,

body.dh-register-body
#registration
input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #f5f2eb !important;

    -webkit-box-shadow:
        0 0 0 1000px
        #0c0d0c
        inset !important;

    caret-color:
        #f5f2eb;
}


/* ---------------------------------------------------------
   FIELD ICONS
   --------------------------------------------------------- */

body.dh-register-body
#registration
.prepend-icon
.field-icon {
    color:
        rgba(229,160,42,.58) !important;
}


body.dh-register-body
#registration
.prepend-icon
.field {
    padding-left:
        38px;
}


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

body.dh-register-body
#registration label {
    color:
        rgba(255,255,255,.62);
}


body.dh-register-body
#registration
.text-muted,

body.dh-register-body
#registration
.field-help-text,

body.dh-register-body
#registration small {
    color:
        rgba(255,255,255,.45) !important;
}


/* ---------------------------------------------------------
   PHONE INPUT
   --------------------------------------------------------- */

body.dh-register-body
.iti,

body.dh-register-body
.intl-tel-input {
    width: 100%;
}


body.dh-register-body
.iti__selected-flag,

body.dh-register-body
.intl-tel-input
.selected-flag {
    background:
        rgba(255,255,255,.025) !important;
}


body.dh-register-body
.iti__country-list {
    border-color:
        rgba(255,255,255,.14) !important;

    background:
        #111211 !important;

    color:
        #f5f2eb;
}


/* ---------------------------------------------------------
   PASSWORD
   --------------------------------------------------------- */

body.dh-register-body
.generate-password {
    border:
        1px solid
        rgba(229,160,42,.48) !important;

    border-radius:
        3px;

    background:
        transparent !important;

    color:
        #e5a02a !important;

    box-shadow:
        none !important;
}


body.dh-register-body
.password-strength-meter
.progress {
    height:
        5px;

    margin-top:
        8px;

    background:
        rgba(255,255,255,.07);
}


/* ---------------------------------------------------------
   MARKETING OPT-IN
   --------------------------------------------------------- */

body.dh-register-body
.marketing-email-optin {
    margin-top:
        28px;

    padding:
        18px;

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

    border-radius:
        5px;

    background:
        rgba(10,11,10,.72);
}


body.dh-register-body
.marketing-email-optin h4 {
    margin-top: 0;

    color:
        #f5f2eb;
}


body.dh-register-body
.marketing-email-optin p {
    color:
        rgba(255,255,255,.50);
}


body.dh-register-body
.marketing-email-optin
.bootstrap-switch {
    border:
        1px solid
        rgba(229,160,42,.40) !important;

    background:
        #0c0d0c !important;

    box-shadow:
        none !important;
}


body.dh-register-body
.marketing-email-optin
.bootstrap-switch-primary,

body.dh-register-body
.marketing-email-optin
.bootstrap-switch-success {
    background:
        #e5a02a !important;

    color:
        #080808 !important;
}


body.dh-register-body
.marketing-email-optin
.bootstrap-switch-default {
    background:
        #161716 !important;

    color:
        rgba(255,255,255,.55) !important;
}


/* ---------------------------------------------------------
   TERMS & CONDITIONS
   --------------------------------------------------------- */

body.dh-register-body
#registration
.tospanel {
    margin-top:
        22px;

    overflow: hidden;

    border:
        1px solid
        rgba(229,160,42,.34) !important;

    border-radius:
        5px;

    background:
        rgba(10,11,10,.72) !important;

    box-shadow:
        none !important;
}


body.dh-register-body
#registration
.tospanel
.panel-heading {
    border: 0;

    border-bottom:
        1px solid
        rgba(229,160,42,.20);

    background:
        rgba(229,160,42,.045) !important;

    color:
        #f5f2eb !important;
}


body.dh-register-body
#registration
.tospanel
.panel-body {
    border: 0;

    background:
        transparent !important;

    color:
        rgba(255,255,255,.58);
}


body.dh-register-body
#registration
.tospanel a {
    color:
        #e5a02a;
}


/* ---------------------------------------------------------
   CAPTCHA
   --------------------------------------------------------- */

/*
 * reCAPTCHA v3 badge is already hidden globally.
 * The required Google attribution is already in our footer.
 */


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

body.dh-register-body
#registration
input[type="submit"].btn-primary {
    min-width:
        250px;

    min-height:
        52px;

    margin:
        15px
        auto
        10px;

    border:
        1px solid
        #e5a02a !important;

    border-radius:
        4px;

    background:
        #e5a02a !important;

    color:
        #080808 !important;

    font-size:
        .88rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    box-shadow:
        none !important;
}


body.dh-register-body
#registration
input[type="submit"].btn-primary:hover {
    filter:
        brightness(1.07);
}


/* ---------------------------------------------------------
   ERRORS
   --------------------------------------------------------- */

body.dh-register-body
.alert {
    border-radius:
        5px;

    box-shadow:
        none;
}


body.dh-register-body
.alert-danger {
    border:
        1px solid
        rgba(190,68,68,.50);

    background:
        rgba(112,31,31,.24) !important;

    color:
        #f4dddd !important;
}


body.dh-register-body
.alert-info {
    border:
        1px solid
        rgba(229,160,42,.28);

    background:
        rgba(229,160,42,.045) !important;

    color:
        rgba(255,255,255,.67) !important;
}


/* ---------------------------------------------------------
   LINKED ACCOUNTS
   --------------------------------------------------------- */

body.dh-register-body
#registration
.provider-linking,

body.dh-register-body
#registration
.providerLinkingFeedback {
    color:
        rgba(255,255,255,.62);
}


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

body.dh-register-body
#footer {
    margin: 0 !important;

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

    background:
        #050605 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {

    body.dh-register-body
    #main-body > .container {
        width:
            calc(100% - 28px);
    }

    body.dh-register-body
    .dh-register-logo img {
        height:
            50px;
    }

    body.dh-register-body
    .dh-register-topbar-actions
    > a:first-child {
        display:
            none;
    }

    body.dh-register-body
    .dh-register-intro h1 {
        font-size:
            2.2rem;
    }

    body.dh-register-body
    #main-body {
        padding-bottom:
            215px !important;
    }

    body.dh-register-body
    #main-body::before {
        height:
            235px;

        background-size:
            auto 235px;
    }

}