/* =========================================================
   DUNEHOST — HOSTING DOMAIN SETUP
   configureproductdomain.tpl
   ========================================================= */

#order-standard_cart {
    background:#050605 !important;
    color:#d4d0c6;
    min-height:calc(100vh - 150px);
}


/* ---------------------------------------------------------
   Remove old WHMCS order sidebar on this step
   --------------------------------------------------------- */

#order-standard_cart > .row {
    display:block;
    margin:0 !important;
}

#order-standard_cart .cart-sidebar {
    display:none !important;
}

#order-standard_cart .cart-body {
    width:100% !important;
    max-width:1050px;
    float:none !important;
    margin:0 auto !important;
    padding:42px 34px 80px !important;
}


/* ---------------------------------------------------------
   Heading
   --------------------------------------------------------- */

#order-standard_cart .dh-domain-setup-heading {
    border:0 !important;
    margin:0 0 28px !important;
    padding:0 !important;
}

.dh-domain-setup-kicker {
    color:#d99a2c;
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:9px;
}

#order-standard_cart .dh-domain-setup-heading h1 {
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
    font-size:34px !important;
    font-weight:600 !important;
    line-height:1.15;
}

#order-standard_cart .dh-domain-setup-heading p {
    margin:8px 0 0;
    color:rgba(255,255,255,.43);
    font-size:13px;
}


/* collapsed categories are not needed here either */
#order-standard_cart .categories-collapsed,
#order-standard_cart .sidebar-collapsed {
    display:none !important;
}


/* ---------------------------------------------------------
   Domain option cards
   --------------------------------------------------------- */

#order-standard_cart .domain-selection-options {
    display:grid;
    gap:13px;
}

#order-standard_cart .domain-selection-options > .option {
    position:relative;
    margin:0 !important;
    padding:0 !important;
    background:#090a09 !important;
    border:1px solid rgba(255,255,255,.075) !important;
    border-radius:6px !important;
    overflow:hidden;
    transition:border-color .18s ease, background .18s ease;
}

#order-standard_cart .domain-selection-options > .option:hover {
    border-color:rgba(229,160,42,.34) !important;
    background:#0c0d0c !important;
}

#order-standard_cart .domain-selection-options > .option > label {
    display:flex !important;
    align-items:center;
    min-height:62px;
    margin:0 !important;
    padding:17px 20px !important;
    color:#eee9df !important;
    font-size:14px !important;
    font-weight:500 !important;
    cursor:pointer;
    background:transparent !important;
}

#order-standard_cart .domain-selection-options > .option > label:hover {
    color:#fff !important;
}

#order-standard_cart .domain-selection-options input[type="radio"] {
    appearance:none;
    -webkit-appearance:none;
    width:17px;
    height:17px;
    border-radius:50%;
    border:1px solid rgba(229,160,42,.48);
    background:#050605;
    margin:0 12px 0 0 !important;
    flex:0 0 17px;
    position:relative;
}

#order-standard_cart .domain-selection-options input[type="radio"]:checked {
    border-color:#e5a02a;
    box-shadow:0 0 0 3px rgba(229,160,42,.08);
}

#order-standard_cart .domain-selection-options input[type="radio"]:checked:after {
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    top:4px;
    left:4px;
    background:#e5a02a;
    border-radius:50%;
}

#order-standard_cart .domain-selection-options > .option:has(input[type="radio"]:checked) {
    border-color:rgba(229,160,42,.52) !important;
    background:rgba(229,160,42,.035) !important;
}


/* ---------------------------------------------------------
   Expanded area under selected option
   --------------------------------------------------------- */

#order-standard_cart .domain-input-group {
    background:#070807 !important;
    border-top:1px solid rgba(255,255,255,.055) !important;
    padding:18px 20px !important;
    margin:0 !important;
}

#order-standard_cart .domain-input-group .row {
    margin-left:-7px;
    margin-right:-7px;
}

#order-standard_cart .domain-input-group [class*="col-"] {
    padding-left:7px;
    padding-right:7px;
}

#order-standard_cart .domains-row {
    margin-bottom:0 !important;
}


/* ---------------------------------------------------------
   Inputs
   --------------------------------------------------------- */

#order-standard_cart .form-control,
#order-standard_cart textarea,
#order-standard_cart select {
    background:#050605 !important;
    border:1px solid rgba(255,255,255,.105) !important;
    color:#e7e3da !important;
    box-shadow:none !important;
}

#order-standard_cart .form-control:focus,
#order-standard_cart textarea:focus,
#order-standard_cart select:focus {
    border-color:rgba(229,160,42,.58) !important;
    box-shadow:0 0 0 1px rgba(229,160,42,.08) !important;
}

#order-standard_cart .input-group-addon,
#order-standard_cart .input-group-text {
    background:#0d0e0d !important;
    border-color:rgba(255,255,255,.105) !important;
    color:#a99b80 !important;
}

#order-standard_cart textarea#message {
    width:100%;
    min-height:100px;
    padding:12px;
    border-radius:4px;
}


/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

#order-standard_cart .btn-primary,
#order-standard_cart #btnCheckAvailability,
#order-standard_cart #useOwnDomain,
#order-standard_cart #btnDomainContinue {
    background:#e5a02a !important;
    border:1px solid #e5a02a !important;
    color:#17120a !important;
    font-weight:600;
    box-shadow:none !important;
}

#order-standard_cart .btn-primary:hover,
#order-standard_cart #btnCheckAvailability:hover,
#order-standard_cart #useOwnDomain:hover,
#order-standard_cart #btnDomainContinue:hover {
    background:#f0aa30 !important;
    border-color:#f0aa30 !important;
    color:#111 !important;
}


/* ---------------------------------------------------------
   Free-domain note
   --------------------------------------------------------- */

#order-standard_cart #frmProductDomain > p {
    margin:15px 2px 0;
    color:rgba(255,255,255,.36);
    font-size:11px;
}


/* ---------------------------------------------------------
   Search results
   --------------------------------------------------------- */

#order-standard_cart #DomainSearchResults {
    margin-top:20px;
    padding:20px;
    background:#090a09;
    border:1px solid rgba(255,255,255,.075);
    border-radius:6px;
    color:#d2cec4;
}

#order-standard_cart .primary-domain-header {
    color:#d9a245 !important;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-bottom:10px;
}

#order-standard_cart .domain-checker-result-headline,
#order-standard_cart .domain-lookup-primary-results {
    color:#d3cfc4;
}

#order-standard_cart .domain-checker-available,
#order-standard_cart .domain-available {
    color:#9fc9a7 !important;
}

#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-unavailable,
#order-standard_cart .domain-invalid {
    color:#d79d96 !important;
}

#order-standard_cart .domain-price {
    color:#fff !important;
}

#order-standard_cart .domain-price .price {
    color:#e5a02a !important;
    font-weight:600;
}


/* Spotlight / suggestion areas, if WHMCS exposes them */

#order-standard_cart .spotlight-tld,
#order-standard_cart .suggested-domains,
#order-standard_cart .domain-suggestion {
    background:#080908 !important;
    border-color:rgba(255,255,255,.075) !important;
    color:#d5d1c7 !important;
}

#order-standard_cart .suggested-domains .panel-heading,
#order-standard_cart .suggested-domains .card-header,
#order-standard_cart .suggested-domains .panel-footer,
#order-standard_cart .suggested-domains .card-footer,
#order-standard_cart .suggested-domains .panel-body,
#order-standard_cart .suggested-domains .card-body,
#order-standard_cart .list-group-item {
    background:#090a09 !important;
    color:#c8c4bb !important;
    border-color:rgba(255,255,255,.065) !important;
}

#order-standard_cart .domain-suggestion .domain,
#order-standard_cart .domain-suggestion .extension {
    color:#fff;
}


/* ---------------------------------------------------------
   Continue button
   --------------------------------------------------------- */

#order-standard_cart #btnDomainContinue {
    margin-top:18px;
    min-width:170px;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media(max-width:767px) {

    #order-standard_cart .cart-body {
        padding:26px 18px 65px !important;
    }

    #order-standard_cart .dh-domain-setup-heading h1 {
        font-size:28px !important;
    }

    #order-standard_cart .domain-input-group {
        padding:15px !important;
    }

    #order-standard_cart .domain-input-group .col-sm-2 {
        margin-top:10px;
    }

    #order-standard_cart #btnDomainContinue {
        width:100%;
    }

}


/* =========================================================
   DUNEHOST — BURY STOCK WHMCS CHROME
   configureproductdomain only
   ========================================================= */

/*
   This stylesheet is loaded only for configureproductdomain,
   so these global selectors are safe here.
*/

body > header,
body > .header,
body > nav,
body > .navbar,
body > .navbar-default,
body > .navbar-main,
body > .main-navbar-wrapper,
body > .primary-navbar,
body > .secondary-navbar,
body > section#main-menu,
body > #main-menu,
body > .top-nav,
body > .top-nav-wrapper,
body > footer,
body > .footer,
body > #footer {
    display:none !important;
}


/* WHMCS commonly wraps its stock header/nav inside these */
header.header,
section#main-menu,
.navbar-main,
#main-menu,
footer.footer {
    display:none !important;
}


/* Kill inherited white page shell */
body,
html {
    background:#050605 !important;
}

body {
    margin:0 !important;
    padding:0 !important;
}

.container,
.container-fluid {
    max-width:none;
}


/* =========================================================
   DUNEHOST ORDER HEADER
   ========================================================= */

.dh-order-topbar {
    height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 34px;
    background:#050605;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.dh-order-logo {
    display:block;
}

.dh-order-logo img {
    width:185px;
    max-height:55px;
    display:block;
}

.dh-order-top-actions {
    display:flex;
    align-items:center;
    gap:24px;
}

.dh-order-top-actions a {
    color:rgba(255,255,255,.55);
    text-decoration:none;
    font-size:12px;
    transition:.15s ease;
}

.dh-order-top-actions a:hover {
    color:#e5a02a;
}


/* Remove whitespace left behind by WHMCS page wrappers */
#main-body,
.main-content,
section#main-body,
#content,
.content-wrapper {
    background:#050605 !important;
    margin-top:0 !important;
    padding-top:0 !important;
}


/* Keep order form itself nicely positioned */
#order-standard_cart {
    margin-top:0 !important;
}


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

@media(max-width:700px) {

    .dh-order-topbar {
        height:auto;
        min-height:76px;
        padding:14px 18px;
        gap:15px;
    }

    .dh-order-logo img {
        width:150px;
    }

    .dh-order-top-actions {
        gap:12px;
    }

    .dh-order-top-actions a {
        font-size:11px;
    }

}

@media(max-width:520px) {

    .dh-order-top-actions a:nth-child(1),
    .dh-order-top-actions a:nth-child(2) {
        display:none;
    }

}


/* =========================================================
   DUNEHOST — FINAL WHMCS CHROME BURIAL
   Exact DOM selectors confirmed from header.tpl
   ========================================================= */

.dh-configure-product-domain-body #header,
.dh-configure-product-domain-body #main-menu {
    display:none !important;
}


/* Remove any spacing the two stock sections leave behind */

.dh-configure-product-domain-body #main-body,
.dh-configure-product-domain-body section#main-body {
    margin-top:0 !important;
    padding-top:0 !important;
}

.dh-configure-product-domain-body {
    background:#050605 !important;
}


/* Our DuneHost order header is now the actual first visible header */

.dh-configure-product-domain-body .dh-order-topbar {
    margin-top:0 !important;
}


/* =========================================================
   DUNEHOST — DEFAULT CLIENT HEADER + DUNES
   ========================================================= */

.dh-product-domain-shell {
    position:relative;
    min-height:100vh;
    background:#050605;
    overflow:hidden;
    padding-bottom:190px;
}


/* Default DuneHost top bar */

.dh-product-domain-shell .dh-client-topbar {
    height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 34px;
    background:#050605;
    border-bottom:1px solid rgba(255,255,255,.07);
    position:relative;
    z-index:5;
}

.dh-product-domain-shell .dh-client-logo {
    display:block;
}

.dh-product-domain-shell .dh-client-logo img {
    width:185px;
    max-height:55px;
    display:block;
}

.dh-product-domain-shell .dh-client-top-actions {
    display:flex;
    align-items:center;
    gap:18px;
}

.dh-product-domain-shell .dh-client-top-actions a {
    color:rgba(255,255,255,.48);
    text-decoration:none;
    font-size:12px;
}

.dh-product-domain-shell .dh-client-top-actions a:hover {
    color:#e5a02a;
}

.dh-product-domain-shell .dh-client-logout-top {
    padding:9px 15px;
    border:1px solid rgba(229,160,42,.28);
    border-radius:4px;
}

.dh-product-domain-shell .dh-client-logout-top:hover {
    border-color:rgba(229,160,42,.55);
}


/* Remove styles from obsolete custom order header */

.dh-order-topbar,
.dh-order-logo,
.dh-order-top-actions {
    display:none !important;
}


/* Main area sits above dunes */

.dh-product-domain-shell #order-standard_cart {
    position:relative;
    z-index:2;
}


/* ==========================================================
   DUNEHOST — DOMAIN STEP FINAL LAYOUT
   ========================================================== */

/*
 * The template outputs:
 *
 *   topbar
 *   order content
 *   copyright
 *   dunes
 *
 * Flex ordering gives us the desired visual sequence:
 *
 *   content -> dunes -> copyright
 */

.dh-product-domain-shell {
    display: flex !important;
    flex-direction: column !important;

    min-height: auto !important;
    padding-bottom: 0 !important;

    overflow: visible !important;
}


.dh-product-domain-shell
.dh-client-topbar {
    order: 0;
}


.dh-product-domain-shell
#order-standard_cart {
    order: 1;

    position: relative;
    z-index: 2;
}


/*
 * A little breathing room between the domain choices
 * and the desert.
 */

.dh-product-domain-shell
#order-standard_cart
.cart-body {
    padding-bottom: 35px !important;
}


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

.dh-product-domain-dunes {
    order: 2;

    position: relative !important;

    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: 100vw !important;
    max-width: none !important;

    height: 230px !important;

    margin:
        0 !important;

    transform:
        translateX(-50%) !important;

    background:
        linear-gradient(
            to bottom,
            #050605 0%,
            rgba(5,6,5,.52) 18%,
            rgba(5,6,5,.12) 42%,
            rgba(5,6,5,0) 68%
        ),
        url("../../../dunehost/img/dunehost/dunehost-dunes.webp")
        center bottom / 100% auto
        no-repeat !important;

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

    overflow:
        hidden;

    pointer-events:
        none;

    z-index:
        1;
}


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

.dh-product-domain-footer {
    order: 3;

    position: relative !important;

    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: 100vw !important;
    max-width: none !important;

    min-height: 46px !important;

    margin:
        0 !important;

    padding:
        0 20px !important;

    transform:
        translateX(-50%) !important;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

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

    background:
        #050605 !important;

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

    text-align:
        center !important;

    font-size:
        11px !important;

    z-index:
        2;
}


/* ----------------------------------------------------------
   PAGE OVERFLOW CONTROL
   ---------------------------------------------------------- */

html,
body.dh-configure-product-domain-body {
    overflow-x:
        hidden;
}

@supports (overflow: clip) {

    html,
    body.dh-configure-product-domain-body {
        overflow-x:
            clip !important;
    }

}


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

@media (max-width: 700px) {

    .dh-product-domain-shell
    .dh-client-topbar {
        min-height:
            76px;

        height:
            auto;

        padding:
            14px 18px;
    }


    .dh-product-domain-shell
    .dh-client-logo img {
        width:
            150px;
    }


    .dh-product-domain-shell
    #order-standard_cart
    .cart-body {
        padding-bottom:
            25px !important;
    }


    .dh-product-domain-dunes {
        height:
            190px !important;

        background-size:
            auto 190px !important;
    }


    .dh-product-domain-footer {
        min-height:
            46px !important;

        padding:
            0 18px !important;
    }

}