/* =========================
   MYCLOUDO CART DESIGN
========================= */

body#cart,
body[data-page="cart"]{
    background:#f4f8fc !important;
}

/* Page Header */

#order-standard_cart .cart-title,
#order-standard_cart h1,
#order-standard_cart h2{
    font-weight:800 !important;
    color:#0f172a !important;
}

/* Cart Boxes */

#order-standard_cart .panel,
#order-standard_cart .cart-sidebar,
#order-standard_cart .domain-checker-container,
#order-standard_cart .products,
#order-standard_cart .view-cart-items{
    border:none !important;
    border-radius:24px !important;
    box-shadow:0 15px 45px rgba(15,23,42,.08) !important;
    /* overflow:hidden removed — was clipping the TLD dropdown and CAPTCHA popup */
    overflow:visible;
}

/* Product Cards */

#order-standard_cart .product{
    border-radius:24px !important;
    border:none !important;
    box-shadow:0 12px 35px rgba(15,23,42,.08) !important;
    transition:.3s ease;
    /* overflow:hidden removed — was clipping dropdowns inside product cards */
    background:#fff !important;
}

#order-standard_cart .product:hover{
    transform:translateY(-5px);
}

/* Pricing */

#order-standard_cart .price,
#order-standard_cart .price-price{
    color:#0284c7 !important;
    font-weight:900 !important;
}

/* Buttons */

#order-standard_cart .btn-primary,
#order-standard_cart .checkout-btn,
#order-standard_cart .btn-add-to-cart{
    background:linear-gradient(135deg,#0ea5e9,#2563eb) !important;
    border:none !important;
    border-radius:16px !important;
    padding:14px 24px !important;
    font-weight:800 !important;
    box-shadow:0 12px 30px rgba(37,99,235,.22);
}

#order-standard_cart .btn-primary:hover{
    transform:translateY(-2px);
    opacity:.95;
}

/* Domain Search */

#order-standard_cart .domain-checker-container{
    padding:35px !important;
    background:#fff !important;
}

/* Inputs */

#order-standard_cart input,
#order-standard_cart select{
    border-radius:14px !important;
    min-height:52px !important;
    border:1px solid #dbe4ee !important;
    box-shadow:none !important;
}

/* Sidebar */

#order-standard_cart .cart-sidebar{
    background:#fff !important;
    padding:22px !important;
}

/* Mobile */

@media(max-width:768px){

    #order-standard_cart .product{
        margin-bottom:25px !important;
    }

    #order-standard_cart .btn-primary{
        width:100%;
    }

}
/* MyCloudo Checkout Polish */

#order-standard_cart .order-summary {
    border-radius: 24px !important;
    /* overflow: hidden removed — was clipping inner popups */
    overflow: visible !important;
    box-shadow: 0 20px 55px rgba(15,23,42,.12) !important;
    border: none !important;
}

/* ── Z-INDEX FIXES: TLD dropdown & CAPTCHA popup ── */

/* TLD multiselect dropdown must sit above everything */
#order-standard_cart .domain-checker-container .multiselect-container,
#order-standard_cart .domain-checker-container .dropdown-menu,
.multiselect-container.dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
}

/* CAPTCHA popup sits above everything else */
#default-captcha-domainchecker,
.captcha-container,
#order-standard_cart [id*="captcha"],
#order-standard_cart [class*="captcha"] {
    z-index: 10000 !important;
    position: relative !important;
}

/* Google reCAPTCHA iframe */
.g-recaptcha,
#google-recaptcha-domainchecker {
    z-index: 10000 !important;
    position: relative !important;
}

/* Make sure the domain checker rows don't clip their children */
#order-standard_cart .domain-checker-container .input-group,
#order-standard_cart .domain-checker-container .row,
#order-standard_cart .domain-checker-container form {
    overflow: visible !important;
    position: relative !important;
}

#order-standard_cart .order-summary h2,
#order-standard_cart .summary-container .order-summary h2 {
    background: linear-gradient(135deg,#03162b,#075985) !important;
    color: #fff !important;
    font-weight: 800 !important;
    padding: 18px 20px !important;
}

#order-standard_cart .checkout-btn,
#order-standard_cart a.btn-checkout,
#order-standard_cart .btn-success {
    background: linear-gradient(135deg,#0ea5e9,#2563eb) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 16px 24px !important;
    font-weight: 800 !important;
    color: #fff !important;
    box-shadow: 0 14px 35px rgba(37,99,235,.25) !important;
}

#order-standard_cart .checkout-btn:hover,
#order-standard_cart a.btn-checkout:hover,
#order-standard_cart .btn-success:hover {
    transform: translateY(-2px);
    opacity: .95;
}

#order-standard_cart .secondary-cart-body,
#order-standard_cart .view-cart-items,
#order-standard_cart .domain-renewals,
#order-standard_cart .promo-code-cart-container {
    background: #fff !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 45px rgba(15,23,42,.08) !important;
}

#order-standard_cart .btn-default {
    border-radius: 14px !important;
    border: 1px solid #dbeafe !important;
    color: #075985 !important;
    font-weight: 700 !important;
}

@media(max-width:768px){
    #order-standard_cart .order-summary {
        margin-top: 25px !important;
    }

    #order-standard_cart h1 {
        font-size: 34px !important;
        line-height: 1.2 !important;
    }
}
/* Better empty cart spacing */
#order-standard_cart {
    min-height: 520px !important;
    padding-bottom: 80px !important;
}

#order-standard_cart .empty-cart,
#order-standard_cart .view-cart-empty,
#order-standard_cart .secondary-cart-body {
    min-height: 100px !important;
}

/* Improve cart page container */
#order-standard_cart .container,
#order-standard_cart .row {
    align-items: flex-start !important;
}

/* Order summary refinement */
#order-standard_cart .order-summary {
    background: #ffffff !important;
}

#order-standard_cart .order-summary .total-due-today {
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* Fix featured TLD price - higher specificity to override #order-standard_cart .price rule */
#order-standard_cart .featured-tld .price,
#order-standard_cart .featured-tld .price.com,
#order-standard_cart .featured-tld .price.net,
#order-standard_cart .featured-tld .price.online,
#order-standard_cart .featured-tld .price.ai,
#order-standard_cart .featured-tld .price.org,
#order-standard_cart .featured-tld .price.store,
#order-standard_cart .featured-tld .price.shop,
#order-standard_cart .featured-tld .price.tech,
#order-standard_cart .featured-tld .price.blog,
#order-standard_cart .featured-tld .price.live,
#order-standard_cart .featured-tld .price.social,
#order-standard_cart .featured-tld [class*="price"] {
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    padding: 8px 5px !important;
    position: static !important;
    transform: none !important;
    color: #ffffff !important;
}

/* Fix Safe Search checkbox alignment */
#order-standard_cart .domain-checker-container input[type="checkbox"],
.domainchecker-form input[type="checkbox"],
input#safesearch {
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    top: 0 !important;
}

.domainchecker-form .checkbox,
.domainchecker-form label,
#order-standard_cart label[for="safesearch"],
#order-standard_cart .safe-search-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    vertical-align: middle !important;
    margin: 0 !important;
    line-height: 1 !important;
}


/* ── DROPDOWN FIX: Include TLDs & Maximum Length ── */
/* Only style when Bootstrap opens them via .open class */

.btn-group,
#order-standard_cart .btn-group {
    overflow: visible !important;
    position: relative !important;
}

/* Style the open dropdown */
.btn-group.open .multiselect-container {
    z-index: 99999 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-width: 200px !important;
    background: #fff !important;
    border: 1px solid #dbe4ee !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.12) !important;
    padding: 4px 0 !important;
}

/* Fix spacing between items — remove extra padding/margin */
.btn-group.open .multiselect-container > li {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.btn-group.open .multiselect-container > li > a {
    padding: 2px 12px !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* Label + radio/checkbox alignment fix */
.btn-group.open .multiselect-container > li > a > label {
    font-size: 14px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 4px 8px 4px 30px !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 28px !important;
}

/* Radio & checkbox inside label — vertically centered */
.btn-group.open .multiselect-container > li > a > label input[type="radio"],
.btn-group.open .multiselect-container > li > a > label input[type="checkbox"] {
    position: relative !important;
    margin: 0 !important;
    top: 0 !important;
    float: none !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Search input inside dropdown */
.btn-group.open .multiselect-container .multiselect-filter {
    padding: 6px 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 2px !important;
}

.btn-group.open .multiselect-container .multiselect-filter input {
    min-height: 32px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

/* scrollbar */
.btn-group.open .multiselect-container::-webkit-scrollbar { width: 5px; }
.btn-group.open .multiselect-container::-webkit-scrollbar-thumb {
    background: #dbe4ee;
    border-radius: 6px;
}


/* =========================================================
   MYCLOUDO FINAL FIX V2
   Register + Cart/Configure Pages
   Added: 2026-06-02
========================================================= */

/* ---------- Global form card safety ---------- */
#registration,
#frmCheckout,
#order-standard_cart,
#order-standard_cart .products,
#order-standard_cart .view-cart-items,
#order-standard_cart .secondary-cart-body,
#order-standard_cart .promo-code-cart-container,
#order-standard_cart .order-summary {
    overflow: visible !important;
}

/* ---------- Register page section headings ---------- */
#registration .sub-heading,
#frmCheckout .sub-heading,
form[action*="register"] .sub-heading,
form[name="orderfrm"] .sub-heading,
.sub-heading {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 1px !important;
    margin: 34px 0 22px !important;
    padding: 0 !important;
    clear: both !important;
    border: 0 !important;
    border-top: 1px solid #dbe4ee !important;
    background: transparent !important;
    text-align: center !important;
    transform: none !important;
    z-index: 1 !important;
}

#registration .sub-heading span,
#frmCheckout .sub-heading span,
form[action*="register"] .sub-heading span,
form[name="orderfrm"] .sub-heading span,
.sub-heading span {
    display: inline-block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 auto !important;
    padding: 9px 24px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: #071426 !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    z-index: 2 !important;
}

/* Give fields enough room below headings */
#registration .sub-heading + .row,
#registration .sub-heading + .form-group,
#frmCheckout .sub-heading + .row,
#frmCheckout .sub-heading + .form-group,
.sub-heading + .row,
.sub-heading + .form-group {
    margin-top: 4px !important;
}

#registration .form-group,
#frmCheckout .form-group,
form[action*="register"] .form-group {
    margin-bottom: 18px !important;
    position: relative !important;
    z-index: 2 !important;
}

#registration .form-control,
#frmCheckout .form-control,
form[action*="register"] .form-control,
#registration input,
#registration select,
#registration textarea {
    position: relative !important;
    z-index: 3 !important;
}

#registration .intl-tel-input,
#registration .iti,
#frmCheckout .intl-tel-input,
#frmCheckout .iti {
    width: 100% !important;
    display: block !important;
}

/* Make Additional Information custom field full and clean */
#registration .custom-field,
#registration .client-custom-field,
#frmCheckout .custom-field,
#frmCheckout .client-custom-field {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------- Cart/configure pages alignment ---------- */
#order-standard_cart .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

#order-standard_cart .main-content,
#order-standard_cart .cart-body,
#order-standard_cart .secondary-cart-body,
#order-standard_cart .view-cart-items,
#order-standard_cart .products {
    position: relative !important;
    z-index: 1 !important;
}

#order-standard_cart .order-summary,
#order-standard_cart .cart-sidebar,
#order-standard_cart .summary-container {
    position: relative !important;
    z-index: 2 !important;
    float: none !important;
}

@media (min-width: 992px) {
    #order-standard_cart .col-md-8,
    #order-standard_cart .col-sm-8 {
        width: 66.66666667% !important;
        max-width: 66.66666667% !important;
        flex: 0 0 66.66666667% !important;
    }

    #order-standard_cart .col-md-4,
    #order-standard_cart .col-sm-4 {
        width: 33.33333333% !important;
        max-width: 33.33333333% !important;
        flex: 0 0 33.33333333% !important;
    }

    #order-standard_cart .order-summary {
        max-width: 340px !important;
        margin-left: auto !important;
    }
}

@media (max-width: 991px) {
    #order-standard_cart .col-md-8,
    #order-standard_cart .col-sm-8,
    #order-standard_cart .col-md-4,
    #order-standard_cart .col-sm-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #order-standard_cart .order-summary,
    #order-standard_cart .cart-sidebar,
    #order-standard_cart .summary-container {
        margin-top: 25px !important;
        max-width: 100% !important;
    }
}

#order-standard_cart .empty-cart {
    margin-top: 12px !important;
    margin-right: 20px !important;
}

/* Mobile register cleanup */
@media (max-width: 767px) {
    #registration .sub-heading span,
    #frmCheckout .sub-heading span,
    .sub-heading span {
        font-size: 15px !important;
        padding: 8px 16px !important;
        white-space: normal !important;
    }

    #registration .row > div,
    #frmCheckout .row > div {
        margin-bottom: 12px !important;
    }
}
/* MyCloudo Standard Cart - Final Layout Fix */

@media (min-width: 992px) {

    #order-standard_cart {
        max-width: 1280px !important;
        margin: 0 auto !important;
    }

    #order-standard_cart .cart-sidebar {
        float: left !important;
        width: 300px !important;
        min-width: 300px !important;
        margin-right: 35px !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 5 !important;
    }

    #order-standard_cart .cart-body {
        float: left !important;
        width: calc(100% - 335px) !important;
        max-width: calc(100% - 335px) !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    #order-standard_cart .cart-body > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #order-standard_cart .cart-body > .row > .col-md-8 {
        width: calc(100% - 335px) !important;
        padding-left: 0 !important;
        padding-right: 25px !important;
    }

    #order-standard_cart .cart-body > .row > .col-md-4 {
        width: 335px !important;
        padding-left: 10px !important;
        padding-right: 0 !important;
    }

    #order-standard_cart .order-summary {
        width: 300px !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }
}

@media (max-width: 991px) {
    #order-standard_cart .cart-sidebar,
    #order-standard_cart .cart-body,
    #order-standard_cart .cart-body > .row > .col-md-8,
    #order-standard_cart .cart-body > .row > .col-md-4 {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 25px 0 !important;
        padding: 0 !important;
    }
}

/* MyCloudo Client Area Tiles - Final Clean */
div.tiles .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    margin: 0 !important;
}

div.tiles .row > .tile {
    float: none !important;
    flex: 0 0 calc((100% - 48px) / 4) !important;
    max-width: calc((100% - 48px) / 4) !important;
    width: calc((100% - 48px) / 4) !important;
    margin: 0 !important;
    padding: 18px 22px !important;
    box-sizing: border-box !important;
    min-height: 112px !important;
    border-radius: 18px !important;
}

div.tiles .tile .stat,
div.tiles .tile .title {
    margin-left: 8px !important;
}

div.tiles .tile .highlight {
    left: 22px !important;
    right: 22px !important;
    width: auto !important;
}

@media (max-width: 991px) {
    div.tiles .row {
        flex-wrap: wrap !important;
    }

    div.tiles .row > .tile {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
    }
}

@media (max-width: 575px) {
    div.tiles .row > .tile {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Align tiles start with boxes below */
div.tiles .row {
    margin-left: -34px !important;
    width: calc(100% + 34px) !important;
}

*:focus,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}