/* ==========================================================================
   Versaweb Dark Theme — Cart 2019 Wizard Custom
   Overlay for wizard-style order form pages.
   ========================================================================== */

/* -- Font Face (fallback if main theme hasn't loaded) -- */
@font-face { font-family: 'Proxima Nova'; src: url('/templates/2019/dist/fonts/ProximaNova-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('/templates/2019/dist/fonts/ProximaNova-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('/templates/2019/dist/fonts/ProximaNova-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('/templates/2019/dist/fonts/ProximaNova-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* -- Order Page Dark Base -- */
.orderpage {
    font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #edf0f6;
}

.btn-rounded {
    border-radius: 10em;
}

.btn-order {
    border: 2px solid #282F3E;
    color: #edf0f6;
    background-color: transparent;
}

.btn-order:hover {
    border-color: #009bdb;
    color: #009bdb;
}

#texts-config {
    margin-top: 80px;
}

/* -- Ribbon -- */
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    z-index: 9999;
}

.ribbon::after {
    position: absolute;
    z-index: 9999;
    content: '';
    display: block;
    border: 5px solid #00c000;
}
.ribbon::before {
    position: absolute;
    z-index: 9999;
    content: '';
    display: block;
    border: 5px solid #00c000;
}
.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 15px 0;
    background-color: #00c000;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
    /* Section 52: dark text on #00c000 = 8.47:1 AAA (white fails at 2.48:1) */
    color: #0d0f14;
    font: 700 18px/1 'Proxima Nova', 'Lato', sans-serif;
    text-shadow: none;
    text-transform: uppercase;
    text-align: center;
}

.ribbon-top-right {
    top: -5px;
    right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}
.ribbon-top-right::before {
    top: 5px;
    left: -5px;
}
.ribbon-top-right::after {
    bottom: 0;
    right: 0;
}
.ribbon-top-right span {
    left: -25px;
    top: 40px;
    transform: rotate(45deg);
}

.overflow-wrap-normal {
    overflow-wrap: normal !important;
}

/* -- Carousel fade edges — dark gradient -- */
.orderpage .cart-carousel::before,
.orderpage .cart-carousel::after {
    position: absolute;
    top: 0;
    bottom: 0;
    content: '';
    height: 100%;
    width: 30px;
    z-index: 1;
}

.orderpage .cart-carousel::before {
    left: 0;
    background: linear-gradient(to right, #181C25 0, #181C25 60%, rgba(24, 28, 37, 0) 100%);
}

.orderpage .cart-carousel::after {
    right: 0;
    background: linear-gradient(to left, #181C25 0, #181C25 60%, rgba(24, 28, 37, 0) 100%);
}

/* -- Cards -- */
.orderpage .card {
    position: relative;
    border-radius: 1em;
    background-color: #202531;
    border-color: #282F3E;
    color: #edf0f6;
}

.orderpage .card .card-wave {
    transform: rotate(-4deg);
    width: 398px;
    left: -15px;
    top: -32px;
    height: 179px;
    overflow: hidden;
    position: absolute;
}

.orderpage .card .card-top {
    z-index: 2;
}

.orderpage .card .card-title {
    font-size: 14px;
    color: #edf0f6;
}

.orderpage .card .card-price .card-price-month {
    font-size: 14px;
    margin-top: 5px;
    font-weight: 300;
    color: #9dafc6;
}

/* -- Step Boxes (wizard navigation) -- */
.orderpage .step-box {
    font-size: 13px;
    font-weight: normal;
    position: relative;
    color: #9dafc6;
    background-color: #202531;
}

.orderpage .step-box.step-box-arrow {
    border-right: 1px solid #282F3E !important;
}

.orderpage .step-box.border-bottom {
    border-bottom-width: 2px !important;
    border-bottom-color: #282F3E !important;
}

/* Arrow indicator — dark bg to match card */
.orderpage .step-box.step-box-arrow::after {
    position: absolute;
    top: 27px;
    content: '';
    width: 20px;
    height: 20px;
    background: #202531;
    border-right: 1px solid #282F3E;
    border-bottom: 1px solid #282F3E;
    font-size: 13px;
    font-weight: normal;
    right: -11px;
    transform: rotate(-45deg);
}

.orderpage .step-box.success {
    /* Section 52: brand-green is #00c000 — passes as fg-text on dark bg-card (7.4:1 AAA). */
    color: #00c000;
}

.orderpage .step-box.success:hover {
    opacity: .6;
}

.orderpage .step-box.active {
    color: #009bdb;
    border-bottom-color: #009bdb !important;
}

.orderpage .step-boxes {
    padding: 0;
    display: inline-block;
    overflow: hidden;
    border-radius: 1em;
    background-color: #202531;
    border: 1px solid #282F3E;
}

#updater .table-borders {
    border: 0;
}

#updater .table-radius {
    border-radius: 0;
}

/* -- Loading Animation -- */
@keyframes loadingC {
    0% { transform: translate(0, 0); }
    25% { transform: translate(0, -6px); }
    50% { transform: translate(0, 0); }
    75% { transform: translate(0, 4px); }
    100% { transform: translate(0, 0); }
}

.cart_preloader {
    width: 100%;
    text-align: center;
}

.cart_preloader .cart_preloader_line {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 30%;
    background-color: #009bdb;
}

.cart_preloader .cart_preloader_line:nth-last-child(1) {
    animation: loadingC .8s .1s linear infinite;
}

.cart_preloader .cart_preloader_line:nth-last-child(2) {
    animation: loadingC .8s .2s linear infinite;
}

.cart_preloader .cart_preloader_line:nth-last-child(3) {
    animation: loadingC .8s .3s linear infinite;
}

table.table.px-0 tbody td {
    padding-left: 0;
    padding-right: 0;
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .orderpage .carousel-inner .carousel-item > div {
        display: none;
    }

    .orderpage .carousel-inner .carousel-item > div:first-child {
        display: block;
    }

    .orderpage .card .card-wave {
        width: 700px;
    }
}

@media (max-width: 1128px) {
    .orderpage .card .card-wave {
        width: 800px;
    }
}

.orderpage .carousel-inner .carousel-item.active,
.orderpage .carousel-inner .carousel-item-next,
.orderpage .carousel-inner .carousel-item-prev {
    display: flex;
}

@media (min-width: 768px) {
    .orderpage .carousel-inner .carousel-item-right.active,
    .orderpage .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    .orderpage .carousel-inner .carousel-item-left.active,
    .orderpage .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

.orderpage .carousel-inner .carousel-item-right,
.orderpage .carousel-inner .carousel-item-left {
    transform: translateX(0);
}

/* -- Domain Search Results -- */
.orderpage .active .result-button {
    display: none;
}

.orderpage .result-incart {
    display: none;
}

.orderpage .active .result-incart,
.orderpage .active .result-cart {
    display: inline-block;
}

.orderpage .domain-search-results .result-group {
    overflow: hidden;
}

@media (max-width: 480px) {
    .orderpage .domain-search {
        width: auto;
        padding: 50px 0;
        margin: 0 30px;
    }

    .orderpage .domain-input button {
        font-size: 0;
        margin-left: 10px;
    }

    .orderpage .domain-input button::before {
        content: "\f105";
        font: 16px/30px FontAwesome;
        vertical-align: middle;
    }

    .orderpage .result-sld.mid {
        display: none;
    }

    .orderpage .result-sld.min {
        display: inline;
    }

    .orderpage .spotlight-product {
        width: 100%;
        margin: 0 20px 20px;
    }

    .orderpage .price-period {
        font-size: 0;
    }
}

@media (max-width: 979px) {
    .orderpage .domain-search {
        width: auto;
        margin: 0 30px;
    }

    .orderpage .domain-input button {
        padding: 6px 20px;
    }

    .orderpage .result-row {
        margin: 10px 10px;
    }

    .orderpage .result-button,
    .orderpage .result-data,
    .orderpage .result-data > div,
    .orderpage .result-button a,
    .orderpage .result-hostname,
    .orderpage .result-price {
        width: 100%;
        margin: 0;
        border-radius: 0;
        text-align: center;
        float: none;
        display: block;
    }

    .orderpage .result-data {
        min-height: 52px;
    }

    .orderpage .result-button a {
        font-size: 16px;
        border-radius: 4px 4px 0 0;
    }

    .orderpage .result-data .result-price {
        border-radius: 0 0 4px 4px;
    }

    .orderpage .result-sld.mid {
        display: inline;
    }
}

.orderpage .result-row.active .result-button {
    display: none;
}

.orderpage .result-incart {
    display: none;
}

.orderpage .result-row.active .result-incart,
.orderpage .result-row.active .result-cart {
    display: inline-block;
}

.orderpage .result-row.active .result-price {
    display: none;
}

.orderpage .product_description ul {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .domain-search {
        margin: 0 !important;
    }
    .mobile-domian-firendly {
        padding: 10px !important;
    }
    .wizard-header-icons .material-icons {
        display: none !important;
    }
    .orderpage .step-box.step-box-arrow::after {
        display: none !important;
    }
    .orderpage .step-boxes {
        flex-direction: column !important;
    }
    .orderpage .step-boxes a {
        width: 100% !important;
    }
    .wizard-order-summary-domain {
        flex-direction: unset !important;
        width: 100% !important;
    }
}

/* -- Additional Dark Overrides -- */
.orderpage .card-header {
    background-color: rgba(40, 47, 62, 0.5);
    border-bottom-color: #282F3E;
    color: #edf0f6;
}

.orderpage .text-muted {
    color: #9dafc6 !important;
}

.orderpage .form-control,
.orderpage select,
.orderpage textarea,
.orderpage input[type="text"],
.orderpage input[type="email"],
.orderpage input[type="password"],
.orderpage input[type="number"] {
    background-color: #181C25;
    border-color: #282F3E;
    color: #edf0f6;
}

.orderpage .form-control:focus {
    border-color: #009bdb;
    box-shadow: 0 0 0 0.2rem rgba(0, 155, 219, 0.15);
    background-color: #181C25;
    color: #edf0f6;
}

.orderpage .btn-primary {
    background-color: #009bdb;
    border-color: #009bdb;
    color: #fff;
}

.orderpage .btn-primary:hover,
.orderpage .btn-primary:focus {
    background-color: #0088c2;
    border-color: #0088c2;
}

.orderpage .table {
    color: #edf0f6;
}

.orderpage .table thead th {
    background-color: rgba(40, 47, 62, 0.5);
    border-color: #282F3E;
}

.orderpage .table td,
.orderpage .table th {
    border-color: #282F3E;
}

.orderpage .alert-info {
    background-color: rgba(0, 155, 219, 0.1);
    border-color: rgba(0, 155, 219, 0.2);
    color: #edf0f6;
}

.orderpage .list-group-item {
    background-color: #202531;
    border-color: #282F3E;
    color: #edf0f6;
}

.orderpage hr {
    border-color: #282F3E;
}

.orderpage a:not(.btn) {
    color: #009bdb;
}

.orderpage a:not(.btn):hover {
    color: #0088c2;
}

/* Domain search header dark bg */
.orderpage .domain-header {
    background-color: #202531;
}

.orderpage .domain-search {
    color: #edf0f6;
}

/* Result rows */
.orderpage .result-row {
    background-color: #202531;
    border-color: #282F3E;
}

.orderpage .result-suggestion {
    background-color: rgba(107, 196, 83, 0.1);
}
