/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}


/* =========================================================
   DUNEHOST CLIENT PORTAL — LOGIN
   ========================================================= */

body.dh-login-body {
    min-height: 100vh;
    margin: 0;

    background: #050605;

    color: #f5f2eb;
}


/* Remove public WHMCS shell on login only */

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


/* Remove Six template layout restrictions */

body.dh-login-body #main-body {
    min-height: 100vh;

    margin: 0 !important;
    padding: 0 !important;

    background: #050605;
}

body.dh-login-body #main-body > .container {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}

body.dh-login-body #main-body .main-content {
    width: 100%;

    margin: 0;
    padding: 0;
}

body.dh-login-body #main-body .row {
    margin: 0;
}


/* Main page */

.dh-login-page {
    position: relative;

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

    min-height: 100vh;

    overflow: hidden;

    padding: 50px 24px 105px;

    background:
        radial-gradient(
            circle at 50% 78%,
            rgba(229, 160, 42, 0.055),
            transparent 34%
        ),
        #050605;
}


/* Dunes */

.dh-login-dunes {
    position: absolute;

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

    height: 270px;

    background:
        url("../img/dunehost/dunehost-dunes.webp")
        center bottom / cover
        no-repeat;

    opacity: 0.9;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 24%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 24%,
            #000 100%
        );
}


/* Login shell */

.dh-login-shell {
    position: relative;
    z-index: 10;

    width: min(430px, 100%);

    text-align: center;
}


/* Logo */

.dh-login-logo {
    display: inline-block;

    margin-bottom: 25px;
}

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

    width: auto;
    height: 72px;
    max-width: 250px;

    margin-inline: auto;
}


/* Card */

.dh-login-card {
    position: relative;

    padding: 34px 38px 30px;

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

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.018),
            transparent 45%
        ),
        rgba(8, 9, 8, 0.90);

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.22);

    text-align: left;
}


/* Heading */

.dh-login-heading {
    margin-bottom: 27px;

    text-align: center;
}

.dh-login-heading h1 {
    margin: 0;

    color: #f7f4ed;

    font-size: 2.15rem;
    font-weight: 600;
    line-height: 1.1;
}

.dh-login-heading-line {
    display: block;

    width: 42px;
    height: 1px;

    margin: 15px auto 13px;

    background: #e5a02a;
}

.dh-login-heading p {
    margin: 0;

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

    font-size: 0.95rem;
}


/* Form labels */

.dh-login-form .form-group {
    margin-bottom: 18px;
}

.dh-login-form label {
    margin-bottom: 7px;

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

    font-size: 0.84rem;
    font-weight: 500;
}


/* Inputs */

.dh-login-form .form-control {
    height: 50px;

    padding: 10px 14px;

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

    border-radius: 4px;

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

    color: #fff;

    box-shadow: none;

    transition:
        border-color 160ms ease,
        background 160ms ease;
}

.dh-login-form .form-control::placeholder {
    color:
        rgba(255, 255, 255, 0.31);
}

.dh-login-form .form-control:focus {
    border-color:
        rgba(229, 160, 42, 0.72);

    background:
        rgba(229, 160, 42, 0.025);

    box-shadow: none;
}


/* Remember / forgot */

.dh-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin:
        -2px
        0
        20px;
}

.dh-remember {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin: 0 !important;

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

    font-size: 0.81rem !important;
    font-weight: 400 !important;

    cursor: pointer;
}

.dh-remember input {
    margin: 0;
}

.dh-forgot-link {
    color: #e5a02a;

    font-size: 0.81rem;

    text-decoration: none;
}

.dh-forgot-link:hover,
.dh-forgot-link:focus {
    color: #f0af38;

    text-decoration: none;
}


/* Sign in */

.dh-login-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    width: 100%;
    height: 52px;

    border:
        1px solid
        #e5a02a !important;

    border-radius: 4px;

    background:
        #e5a02a !important;

    color:
        #080808 !important;

    font-size: 0.86rem;
    font-weight: 700;

    text-transform: uppercase;

    box-shadow: none !important;

    transition:
        transform 160ms ease,
        filter 160ms ease;
}

.dh-login-button:hover,
.dh-login-button:focus {
    transform: translateY(-1px);

    filter: brightness(1.07);

    background:
        #e5a02a !important;
}


/* New account */

.dh-login-bottom {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 22px;
    padding-top: 19px;

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

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

    font-size: 0.82rem;
}

.dh-login-bottom a {
    color: #e5a02a;

    text-decoration: none;
}


/* Back */

.dh-login-back {
    margin-top: 18px;
}

.dh-login-back a {
    color:
        rgba(255, 255, 255, 0.42);

    font-size: 0.78rem;

    text-decoration: none;
}

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


/* WHMCS alert cleanup */

body.dh-login-body .alert {
    border-radius: 4px;
}

body.dh-login-body .alert-danger {
    border-color:
        rgba(190, 68, 68, 0.55);

    background:
        rgba(112, 31, 31, 0.27);

    color: #f5dada;
}


/* Linked providers */

.dh-linked-accounts {
    margin-top: 22px;
}


/* Mobile */

@media (max-width: 560px) {

    .dh-login-page {
        align-items: flex-start;

        padding:
            40px
            14px
            110px;
    }

    .dh-login-logo img {
        height: 58px;
    }

    .dh-login-card {
        padding:
            28px
            22px
            25px;
    }

    .dh-login-heading h1 {
        font-size: 1.85rem;
    }

    .dh-login-options {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }

    .dh-login-bottom {
        flex-wrap: wrap;
    }

}


/* =========================================================
   DUNEHOST LOGIN — FINAL POLISH
   ========================================================= */

/* Dark form fields */
body.dh-login-body .dh-login-form .form-control {
    background: rgba(255, 255, 255, 0.035) !important;

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

    color: #f7f4ed !important;

    box-shadow: none !important;
}

/* Placeholder */
body.dh-login-body .dh-login-form .form-control::placeholder {
    color:
        rgba(255, 255, 255, 0.30) !important;
}

/* Browser autofill — stop Chrome turning fields pale blue */
body.dh-login-body .dh-login-form input:-webkit-autofill,
body.dh-login-body .dh-login-form input:-webkit-autofill:hover,
body.dh-login-body .dh-login-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f7f4ed !important;

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

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

    border-color:
        rgba(255, 255, 255, 0.16) !important;

    caret-color: #f7f4ed;
}

/* Gold focus state */
body.dh-login-body .dh-login-form .form-control:focus {
    background:
        rgba(229, 160, 42, 0.025) !important;

    border-color:
        rgba(229, 160, 42, 0.75) !important;

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

/* Slightly clearer return link */
body.dh-login-body .dh-login-back a {
    color:
        rgba(255, 255, 255, 0.58);

    transition:
        color 160ms ease;
}

body.dh-login-body .dh-login-back a:hover,
body.dh-login-body .dh-login-back a:focus {
    color: #e5a02a;
}


/* DuneHost — remove WHMCS scroll-to-top control */
#btnScrollTop {
    display: none !important;
}


/* =========================================================
   DUNEHOST — RECAPTCHA BRANDING
   ========================================================= */

/* Google permits hiding the badge when attribution is visible */
.grecaptcha-badge {
    visibility: hidden !important;
}


/* Quiet footer attribution */
.dh-recaptcha-notice {
    margin-top: 4px;

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

    font-size: 9px;
    line-height: 1.4;

    text-align: center;
}

.dh-recaptcha-notice a {
    color:
        rgba(255,255,255,.34) !important;

    text-decoration: none;
}

.dh-recaptcha-notice a:hover {
    color:
        #e5a02a !important;
}


/* =========================================================
   DUNEHOST — FOOTER COPYRIGHT + RECAPTCHA SAME ROW
   ========================================================= */

#footer {
    position: relative;

    min-height: 46px;

    padding: 0 !important;
}


/* Copyright area */
#footer .container {
    display: flex;
    align-items: center;

    min-height: 46px;

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

#footer .container p {
    margin: 0 !important;

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


/* reCAPTCHA notice — same horizontal row */
#footer .dh-recaptcha-notice {
    position: absolute;

    top: 50%;
    right: max(24px, calc((100vw - 1180px) / 2));

    transform: translateY(-50%);

    margin: 0 !important;

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

    font-size: 9px;
    line-height: 1.3;

    text-align: right;

    white-space: nowrap;
}

#footer .dh-recaptcha-notice a {
    color:
        rgba(255,255,255,.52) !important;
}

#footer .dh-recaptcha-notice a:hover {
    color:
        #e5a02a !important;
}


/* Mobile: allow it to stack cleanly */
@media (max-width: 720px) {

    #footer {
        padding:
            8px
            16px !important;
    }

    #footer .container {
        justify-content: center;

        min-height: auto;

        text-align: center;
    }

    #footer .dh-recaptcha-notice {
        position: static;

        transform: none;

        margin-top:
            4px !important;

        text-align: center;

        white-space: normal;
    }

}