/* =========================================================
   DUNEHOST — PASSWORD RESET FLOW
   ========================================================= */

body.dh-password-reset-body {
    margin: 0;

    background: #050605;

    color: #f5f2eb;
}


/* ---------------------------------------------------------
   REMOVE DEFAULT WHMCS SHELL / TITLE
   --------------------------------------------------------- */

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


body.dh-password-reset-body
.main-content > .header-lined,

body.dh-password-reset-body
.main-content > .breadcrumb {
    display: none !important;
}


body.dh-password-reset-body
#main-body {
    position: relative;

    min-height: calc(100vh - 46px);

    margin: 0 !important;

    padding:
        0
        0
        275px !important;

    box-sizing: border-box;

    background: #050605 !important;
}


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

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

    position: absolute;

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

    height: 295px;

    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%
        );
}


/* ---------------------------------------------------------
   MAIN CONTAINER
   --------------------------------------------------------- */

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

    z-index: 1;

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

    max-width: none;

    margin: 0 auto;

    padding: 0;
}


body.dh-password-reset-body
.main-content {
    float: none !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


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

.dh-reset-topbar {
    display: flex;

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

    min-height: 88px;

    margin-bottom: 34px;

    padding:
        10px
        0;

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


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

    width: auto;
    height: 64px;
}


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

    align-items: center;

    gap: 26px;
}


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

    font-size: .84rem;

    text-decoration: none;
}


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


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

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

    border-radius: 4px;

    color: #e5a02a;
}


/* ---------------------------------------------------------
   RESET AREA
   --------------------------------------------------------- */

.dh-reset-shell {
    width:
        min(520px, 100%);

    margin:
        0
        auto;
}


.dh-reset-intro {
    margin-bottom:
        25px;

    text-align:
        center;
}


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

    color:
        #f7f4ed;

    font-size:
        2.55rem;

    font-weight:
        600;
}


.dh-reset-divider {
    display: block;

    width:
        42px;

    height:
        1px;

    margin:
        16px
        auto;

    background:
        #e5a02a;
}


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

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


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

body.dh-password-reset-body
.dh-reset-card {
    padding:
        28px
        30px
        22px;

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

    border-radius:
        5px;

    background:
        rgba(10,11,10,.82);

    box-shadow:
        0
        18px
        55px
        rgba(0,0,0,.22);
}


body.dh-password-reset-body
.dh-reset-card > p:first-child {
    margin:
        0
        0
        22px;

    color:
        rgba(255,255,255,.55);

    line-height:
        1.55;

    text-align:
        center;
}


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

body.dh-password-reset-body
.dh-reset-card label {
    margin-bottom:
        7px;

    color:
        rgba(255,255,255,.62);

    font-size:
        .82rem;

    font-weight:
        500;
}


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

body.dh-password-reset-body
.dh-reset-card
.form-group {
    margin-bottom:
        17px;
}


body.dh-password-reset-body
.dh-reset-card
.form-control {
    width:
        100%;

    min-height:
        46px;

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

    border-radius:
        4px !important;

    background:
        #0c0d0c !important;

    color:
        #f5f2eb !important;

    box-shadow:
        none !important;
}


body.dh-password-reset-body
.dh-reset-card
.form-control::placeholder {
    color:
        rgba(255,255,255,.27) !important;
}


body.dh-password-reset-body
.dh-reset-card
.form-control:focus {
    border-color:
        rgba(229,160,42,.72) !important;

    outline:
        none !important;

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


/* Browser autofill */
body.dh-password-reset-body
.dh-reset-card
input:-webkit-autofill,

body.dh-password-reset-body
.dh-reset-card
input:-webkit-autofill:hover,

body.dh-password-reset-body
.dh-reset-card
input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #f5f2eb !important;

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

    caret-color:
        #f5f2eb;
}


/* ---------------------------------------------------------
   PRIMARY ACTION
   --------------------------------------------------------- */

body.dh-password-reset-body
.dh-reset-card
.btn-primary {
    min-width:
        210px;

    min-height:
        46px;

    border:
        1px solid
        #e5a02a !important;

    border-radius:
        4px;

    background:
        #e5a02a !important;

    color:
        #080808 !important;

    font-size:
        .82rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    box-shadow:
        none !important;
}


body.dh-password-reset-body
.dh-reset-card
.btn-primary:hover {
    filter:
        brightness(1.07);
}


/* ---------------------------------------------------------
   CANCEL
   --------------------------------------------------------- */

body.dh-password-reset-body
.dh-reset-card
.btn-default,

body.dh-password-reset-body
.dh-reset-cancel {
    min-height:
        46px;

    margin-left:
        8px;

    padding:
        12px
        18px;

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

    border-radius:
        4px;

    background:
        transparent !important;

    color:
        rgba(255,255,255,.52) !important;

    text-decoration:
        none;

    box-shadow:
        none !important;
}


body.dh-password-reset-body
.dh-reset-cancel:hover {
    border-color:
        rgba(229,160,42,.45) !important;

    color:
        #e5a02a !important;
}


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

body.dh-password-reset-body
.dh-reset-card
.progress {
    height:
        5px;

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

    box-shadow:
        none;
}


body.dh-password-reset-body
.dh-reset-card
.help-block,

body.dh-password-reset-body
.dh-reset-card
.text-muted {
    color:
        rgba(255,255,255,.42) !important;
}


/* ---------------------------------------------------------
   ALERTS
   --------------------------------------------------------- */

body.dh-password-reset-body
.dh-reset-card
.alert {
    border-radius:
        4px;

    box-shadow:
        none;

    text-align:
        center;
}


body.dh-password-reset-body
.dh-reset-card
.alert-danger {
    border:
        1px solid
        rgba(190,68,68,.48);

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

    color:
        #f4dddd !important;
}


body.dh-password-reset-body
.dh-reset-card
.alert-success {
    border:
        1px solid
        rgba(229,160,42,.38);

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

    color:
        #f5f2eb !important;
}


body.dh-password-reset-body
.dh-reset-message {
    color:
        rgba(255,255,255,.58);

    line-height:
        1.55;

    text-align:
        center;
}


/* ---------------------------------------------------------
   BACK TO LOGIN
   --------------------------------------------------------- */

.dh-reset-back {
    margin-top:
        21px;

    padding-top:
        17px;

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

    text-align:
        center;
}


.dh-reset-back a {
    color:
        rgba(255,255,255,.42);

    font-size:
        .78rem;

    text-decoration:
        none;
}


.dh-reset-back a:hover {
    color:
        #e5a02a;
}


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

/*
 * reCAPTCHA v3 badge is hidden globally.
 * Google attribution is already displayed in the footer.
 */


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

body.dh-password-reset-body
#footer {
    min-height:
        46px;

    margin:
        0 !important;

    padding:
        0 !important;

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

    background:
        #050605 !important;
}


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

@media (max-width: 720px) {

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

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

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

    body.dh-password-reset-body
    .dh-reset-intro h1 {
        font-size:
            2.1rem;
    }

    body.dh-password-reset-body
    .dh-reset-card {
        padding:
            24px
            20px
            20px;
    }

    body.dh-password-reset-body
    #main-body {
        padding-bottom:
            205px !important;
    }

    body.dh-password-reset-body
    #main-body::before {
        height:
            225px;

        background-size:
            auto 225px;
    }

}