@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Sora:wght@400;600;700;800&display=swap');

/* ===================================================================
   Cruech One -- tokens de marca (calcados de cruechone.com/src/index.css)
   Se remapean las variables originales de Hostiko a los valores reales
   de marca en un solo lugar; el resto del archivo (1500+ líneas) queda
   intacto porque todo ya depende de estas variables.
   =================================================================== */
:root{
    /* Same in all */
    --global--color-primary:#201d24;
    --global--color-accent:#0a0910;
    --global--color-black:#0a0910;
    --global--color-white:#ffffff;
    --global--color-very-light-gray:#d8d6db;
    --global--color-grayish-blue:#b7bcc4;
    --global--color-strong-cyan:#08bba4;
    --global--color-strong-red: #c0392b;
    --global--color-vivid-yellow: #f1c40f;
    --global--color-dark-grayish-cyan:#665f6d;
    --global--color-moderate-lime-green: #5cb85c;
    --global--color-very-dark-desaturated-blue: #201d24;
    --global--color-very-light-gray-mostly-white:#f7f7f8;
    --global--color-very-dark-black-blue:#131116;
    --global--color-very-light-gray-bg: #eeedef;
    /* Change */
    --global--color-very-light-white:#f7f7f8;
    --global--color-dark-gray:#201d24;
    --global--color-dark-mostly-black-blue: #131116;
    --global--color-light-grayish-blue:#e7f6fd;
    --global--color-very-dark-gray-mostly-black: #131116;
    --global--color-bright-orange:#ff4b01;
    --global--color-text:var(--text-muted, #665f6d);
    --global--color-copyright-border:#d8d6db;
    --global--color-breadcrumb-border: #34303a;
    --global--button-border-radius: 10px;
    --global--box-border-radius: 16px;
    --global--social-icon-border-radius: 100px;
    --global--dropdown-border-radius: 12px;
    --global--border-all-side: 1px solid rgba(255,255,255,0.25);

    /* Tokens semanticos propios (no tocan los --global--color-* de arriba,
       que se usan en botones/badges donde SIEMPRE deben ser blanco/negro
       fijo). Estos son los unicos que cambian entre modo oscuro/claro.
       Oscuro = default. */
    --surface-header: #0a0910;
    --surface-page: #0a0910;
    --surface-card: #131116;
    --border-subtle: #34303a;
    --text-heading: #ffffff;
    --text-body: #ffffff;
    --topbar-icon: #ffffff;
    --text-muted: #b4b0b9;
}

/* Modo claro -- se activa con html.theme-light (toggle manual, JS en footer.tpl) */
html.theme-light {
    --surface-header: #ffffff;
    --surface-page: #ffffff;
    --surface-card: #ffffff;
    --border-subtle: #d8d6db;
    --text-heading: #201d24;
    --text-body: #201d24;
    --topbar-icon: #201d24;
    --text-muted: #665f6d;
}

/* Bootstrap define --primary internamente y muchos componentes base (ej.
   el color de link "a { color: #336699 }" en theme.css, especificidad muy
   baja) lo usan como su azul por defecto -- se re-define aqui para que
   cualquier cosa que dependa de el use el naranja de marca en vez de azul. */
:root {
    --primary: #ff4b01;
}
a {
    color: var(--global--color-bright-orange);
}
a:hover {
    color: var(--text-heading);
}

body{font-family: 'Inter', sans-serif;}
h1, h3, h4, .footer-section .contact-section .content h3, .hostiko-domain-search .home-domain-search h2, .pricing-carousel h2, #main-body h2 {
    font-family: 'Sora', 'Inter', sans-serif;
}
h1{
    font-size: 38px;
    line-height: 42px;
    font-weight: 700;
}
h3{
    font-size: 36px;
    line-height: 42px;
    font-weight: 700;
}
h4{
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
}
.text-size-14{
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}
.text-size-18{
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
}
.btn {
    border-radius: var(--global--button-border-radius);
}
.top-bar-section {background: var(--surface-header); border-bottom: 1px solid var(--border-subtle);}
.top-bar-section .top-bar ul li a, .topbar .top-bar-right-content i, .topbar .btn-default, .top-bar-section .btn-default {color: var(--topbar-icon) !important;}
.top-bar-section .top-bar{display: flex; justify-content: space-between; align-items: center;}
.top-bar-section .top-bar ul{padding-left: 0; margin: 5px 0px 10px 0px; }
.top-bar-section .top-bar ul li{
    list-style: none; display: inline-block;  
}
.top-bar-section .top-bar ul .dropdown-item a{ 
    color: var(--global--color-dark-gray); 
}
.top-bar-section .top-bar ul li a{ 
    border-right: var(--global--border-all-side); 
}

.top-bar-section .top-bar ul li a{
    color: var(--global--color-white);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 400;
}
.top-bar-section .top-bar ul li a:hover{
    text-decoration: none;
}
.topbar-search .btn:hover {
    background-color: transparent !important;
    border-bottom: var(--global--border-all-side) !important; 
}
.top-bar-section .top-bar ul li:last-child a{padding-right: 0; border-right: none;}
/* .top-bar-section .top-bar ul li :last-child{border-right: none;} */
.top-bar-section .top-bar ul li:first-child a{padding-left: 0;}
.top-bar-section .btn:focus{
    background-color: transparent !important;
    border-bottom: var(--global--border-all-side) !important;
}
.top-bar-section .form-control{border-radius: 0; background: transparent !important; border: none; border-bottom: var(--global--border-all-side) !important; color: var(--global--color-white); font-size: 12px;}
.top-bar-section .btn-default{border-radius: 0; background: transparent !important; border: none; border-bottom: var(--global--border-all-side) !important; color: var(--global--color-white); font-size: 12px; padding: 6px 4px;}
.top-bar-section .top-bar-right-content i{font-size: 16px; }
.top-bar-section .nav-item .cart-btn .badge-info{position: absolute; top: -5px; right: 3px; font-size: 8px;}
.top-bar-section ::placeholder {color: var(--global--color-white); opacity: 0.8; }
.top-bar-section ::-ms-input-placeholder { color: var(--global--color-white); opacity: 0.8; }

.top-bar-section .nav-item .cart-btn {
    display: inline-block;
    position: relative;
    overflow: visible;
    border-radius: 0;
    background: transparent !important;
    border: none;
    border-right: var(--global--border-all-side);
}
.top-bar-section .nav-item .cart-btn:focus{
    border: none !important;
    border-right: var(--global--border-all-side) !important;
}

.topbar .form-control{background: transparent !important; border: none !important; border-bottom: var(--global--border-all-side) !important; color: var(--global--color-white); font-size: 12px !important;}
#header.header .search {border: none !important; width: auto;}
#header.header .btn {font-size: 12px;}
#header.header .search .form-control {
    padding: 6px !important;
}
.topbar .btn-default{background: transparent !important; border: none !important; border-bottom: var(--global--border-all-side) !important; color: var(--global--color-white); font-size: 12px !important; padding: 6px 4px;}
.topbar .top-bar-right-content i{font-size: 16px; width: 20px; height: 32px; line-height: 32px; }
.topbar .nav-item .cart-btn {display: inline-block; position: relative; }
.topbar .nav-item .cart-btn .badge-info{position: absolute; top: -6px; right: 2px; font-size: 8px;}
.topbar ::placeholder {color: var(--global--color-white); opacity: 0.8; }
.topbar ::-ms-input-placeholder { color: var(--global--color-white); opacity: 0.8; }

/* Header wrapper trae fondo blanco por defecto del core (twenty-one) -- no se
   notaba en el theme original (todo claro alrededor), pero deja una linea
   blanca visible ahora que el topbar y el hero son oscuros. */
#header.header {
    background-color: var(--surface-header);
}
/* Selector de idioma/moneda (movido desde el footer al topbar) -- hereda el
   color de texto por defecto de Bootstrap (gris oscuro), invisible sobre el
   topbar negro. */
.top-bar-section .top-bar-right-content button[data-target="#modalChooseLanguage"] {
    color: var(--global--color-white);
    font-size: 12px;
    background: transparent;
    border: none;
}
.top-bar-section .top-bar-right-content button[data-target="#modalChooseLanguage"]:hover,
.top-bar-section .top-bar-right-content button[data-target="#modalChooseLanguage"]:focus {
    color: var(--global--color-white);
    background: transparent;
}

.sign-in-topbar-right{list-style: none; display: inline-block; margin-bottom: 0;}
.sign-in-topbar-right li{list-style: none; display: inline-block;}
.sign-in-topbar-right li:last-child{border: none;}


#header .navbar.navbar-light {
    background-color: transparent;
    /* box-shadow: 1px 2px 61px 0px rgba(0, 0, 0, 0.10); */
    padding: 20px 0;
    margin-bottom: -85px;
}
#header.header form .btn {font-size: 16px; color: var(--global--color-dark-gray) !important;}
/* #header.header .search{border-bottom: 1px solid var(--global--color-very-light-gray); border-radius: 22.5px;} */
#header.header .form-control{background-color: transparent; padding: 22px 11px;  font-size: 14px; border-radius: 0;}
#header.header .btn-default{background-color: transparent;}
#header.header .toolbar .nav-link{border-radius: 0; background:var(--global--color-bright-orange); color: var(--global--color-white); border-radius: 100%;  height: 48px; width: 48px; padding: 0; font-size: 16px; line-height: 48px; border: none; overflow: visible;}
#header.header .toolbar .nav-link i{color:var(--global--color-white);}
#header.header .toolbar .nav-link:focus {
    color: var(--global--color-white);
    background:var(--global--color-bright-orange) !important;
}

.navbar-default {background-color:var(--global--color-white)}
.navbar-default .navbar-nav>li>a {color:var(--global--color-black)}
.padding_top_70{padding-top:70px;}
.padding_bottom_70{padding-bottom:70px;}
.font-18{font-size:18px;}
.main-header ul li a{font-size:14px;padding:20px!important;font-weight:500;}
.main-header ul li a:hover{background-color:var( --global--color-black);color:var(--global--color-voilet)}
.main-header .dropdown-menu{background-color:var(--global--color-orange);box-shadow:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);border:none}
.main-header .dropdown-menu a{color:var(--global--color-nav);padding:15px 20px!important;line-height:14px;}
#header .navbar-collapse a{font-size: 14px; font-weight: 500; display:block !important; text-transform: uppercase; color:var(--global--color-white); padding:12px 20px !important;}
#header .navbar-collapse li#Primary_Navbar-Home:first-child a{padding-left: 0 !important;}
#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a{color: var(--global--color-white) !important; background-color: var(--global--color-bright-orange) !important; border: 1px solid var(--global--color-bright-orange); border-radius: var(--global--button-border-radius); padding: 10px 17px !important; font-size: 14px; text-transform: uppercase; font-family: 'Inter', sans-serif; font-weight: 500;  margin-left: 25px;}
#header .navbar-collapse li#Secondary_Navbar-Account:first-child a{padding-right: 0 !important;}
#header .navbar-collapse ul li a:hover{background-color:transparent ;text-decoration:none; color: var(--global--color-bright-orange);}
#header.header .toolbar .nav-link .badge{top: -2px; right: 0px; opacity: 1;}
#header.header .toolbar .nav-link .badge.badge-info{background-color: var(--global--color-white); color: var(--global--color-black);box-shadow: 0px 0px 1px rgba(0,0,0,0.2);}
#header .dropdown-menu{border-radius: 12px;}
#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a:hover{
    background-color: transparent !important;
    border: 1px solid var(--global--color-white);
    color: var(--global--color-white) !important;
}
/* Logged In Top Bar */
#header.header .topbar{background: var(--global--color-black); border-bottom: 1px solid var(--global--color-breadcrumb-border); padding: 5px 0 10px 0; border-radius: 0;}
#header.header .topbar .btn{color: var(--global--color-white) !important; border-radius: 0; background: transparent !important;}
#header.header .topbar .btn:focus{
    border-bottom: var(--global--border-all-side) !important;
}
#header.header .topbar #accountNotifications{border: none !important;}
#header.header .topbar .active-client { line-height: 1.5; }
#header.header .topbar .active-client li a{font-size: 12px; color: var(--global--color-white);}
#header.header .topbar .active-client li .dropdown-menu li a{color: var(--global--color-primary);}
/* fix 2026-07-28: mismo bug ya resuelto en el dropdown de idioma/moneda -- color fijo casi-negro invisible sobre tema oscuro */
#header.header .topbar .active-client li .dropdown-menu li a{color: var(--text-body) !important;}

#header.header .topbar .active-client .input-group-text{color: var(--global--color-white);}
#header.header .topbar .active-client .btn{color: var(--global--color-white); padding: 0 10px; font-weight: 400; border: none;  border-right: var(--global--border-all-side); border-radius: 0; overflow: visible;}
#header.header .topbar .active-client .btn:focus{
    border: none !important;
    border-right: var(--global--border-all-side) !important;
}
.main-header .dropdown-menu a:hover{background-color: var(--global--color-black);}

#header .navbar-brand{color:var(--global--color-white)}

#Secondary_Navbar-Account{display: inline-block !important;}

#header .navbar-collapse{padding:0!important}

#header .main-navbar-wrapper .dropdown-menu a{font-size:14px;color:var(--text-body)!important;padding:0!important;text-decoration:none;padding:0 15px!important;line-height:36px;}



#header .main-navbar-wrapper .dropdown-menu li{padding:0}
#header .main-navbar-wrapper .dropdown-menu a:hover{background-color:rgba(255, 75, 1, 0.22)!important;color:var(--text-body)!important;}


/* Banner Section */

.hostiko-banner-whmcs{
    background: #0a0910;
    /* background-color: var(--global--color-light-grayish-blue); */
    background-position: center;
    background-size: cover;
    padding: 90px 0 60px;
}
.hostiko-banner-whmcs .master-breadcrumb, .hostiko-banner-whmcs .breadcrumb{background: transparent; text-align: center;}
.hostiko-banner-whmcs .breadcrumb{justify-content: center;}

/* Domain Search Section */
.hostiko-domain-search .home-domain-search .container{max-width: 1000px;}
.hostiko-domain-search .home-domain-search {background-color: var(--global--color-white) !important; padding: 70px 0px;}
.hostiko-domain-search .home-domain-search .input-group{align-items: center;}
.hostiko-domain-search .home-domain-search .btn-primary,#main-body .btn-outline-primary{border-color: var(--global--color-white); background-color: #131329;}
.hostiko-domain-search .home-domain-search h2,#default-captcha-domainchecker, .home-domain-search .btn-link,#main-body .btn-outline-primary{font-size: 20px; font-weight: 600; text-transform: capitalize; color:var(--global--color-primary); color: var(--global--color-black);}
/* .hostiko-domain-search .home-domain-search .tld-logos {color: var(--global--color-bright-orange);} */
.hostiko-domain-search .home-domain-search .input-group-wrapper{border: none; font-size: 14px; font-weight: 400; font-family: 'Inter', sans-serif; background: var(--global--color-white); border-radius: var(--global--button-border-radius); padding: 11px 10px 11px 20px; box-shadow: 1px 2px 60px 0px rgba(0,0,0,0.1);}
.hostiko-domain-search .home-domain-search .btn-primary, #main-body .btn-outline-primary{background-color: var(--global--color-bright-orange); border: 1px solid var(--global--color-bright-orange); color:var(--global--color-white); padding: 12px 25px; border-radius: var(--global--button-border-radius) !important; font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 600;text-transform: uppercase;}
.hostiko-domain-search .home-domain-search .btn-success{background-color: var(--global--color-primary); border: 1px solid var(--global--color-primary); color: var(--global--color-white); padding: 12px 25px; border-radius: var(--global--button-border-radius) !important; font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 600; text-transform: uppercase; display: inline-block;}
.hostiko-domain-search .home-domain-search .btn-link{display:inline-block; box-shadow:none; color: var(--global--color-primary); font-size: 14px; padding: 10px !important; border: none !important;}
.hostiko-domain-search .home-domain-search .btn-link:focus {
    color: var(--global--color-very-dark-gray-mostly-black) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.home-domain-search .tld-logos img {
    width: auto !important;
    display: block;
    margin-bottom: 8px;
}
.hostiko-domain-search .home-domain-search .tld-logos li {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    padding: 0 35px 0 30px;
    color: var(--global--color-primary);
    border-right: 2px solid var(--global--color-very-light-white);
}
.hostiko-domain-search .home-domain-search .tld-logos li:first-child {
    padding-left: 0;
}
.hostiko-domain-search .home-domain-search .tld-logos li:last-child {
    border: none;
    padding-right: 0;
}
.hostiko-domain-search .home-domain-search .btn-link:focus-visible{
    outline: none;
}
.home-domain-search .input-group-wrapper {
    margin: 35px 0;
}
.hostiko-domain-search .home-domain-search h2{
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 55px;
    text-transform: capitalize;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: var(--global--color-primary);
}
.input-group .input-group-append .btn{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.hostiko-domain-search .home-domain-search .btn-primary{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange) !important;
    border: 1px solid var(--global--color-bright-orange) !important;
}
.hostiko-domain-search .home-domain-search .btn-primary:hover{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border: 1px solid var(--global--color-primary) !important;
}
.hostiko-domain-search .home-domain-search .btn-success:hover {
    color: var(--global--color-white) !important;
    background: var(--global--color-bright-orange) !important;
    border: 1px solid var(--global--color-bright-orange) !important;
}
.list-group-item.active{background-color:var(--global--color-bright-orange); border-color: var(--global--color-bright-orange);}
/* .btn-success{background-color:var(--global--color-orange);border-color:var(--global--color-orange);color:var(--global--color-blue)} */
.btn-order-now {
    padding: 10px;
}
.btn-success {
    padding: 13px;
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: var(--global--color-white);
    display: block;
}
.btn-success:hover{color:var(--global--color-white) !important;background-color:var(--global--color-primary);border-color:var(--global--color-primary)}
.card-header{background-color:var(--global--color-accent);color:var(--global--color-white)}
.card-header h4{margin-bottom:0;}

#main-body {background: var(--global--color-white);}
#main-body h2{font-family: 'Inter', sans-serif; font-size:42px; font-weight: 700; color: var(--global--color-primary);}
/* =================================== Banner ====================================== */

.primary-content .home .card{min-height:250px; background: var(--global--color-white); box-shadow: 1px 2px 61px 0px rgba(0, 0, 0, 0.13); border-radius:20px}
.primary-content .home .card:hover{ border-top: 1px solid var(--global--color-bright-orange);}
.sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover{background-color:var(--global--color-bright-orange);border-color:var(--global--color-bright-orange)}
.btn-block{
color: var(--global--color-white) !important;
}
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* =================================== Footer ====================================== */
/* .footer-heading{color:var(--global--color-black);}
footer.footer{background-color:var(--global--color-white);}
footer.footer .btn{background-color:var(--global--color-blue);}
footer.footer .copyright{color:var(--global--color-black)}
.home-domain-search .btn-success:hover{background-color:var(--global--color-black) !important;border-color:var(--global--color-black) !important;color:var(--global--color-voilet) !important}
footer.footer .nav-link{color:var(--global--color-white);background-color:#087FFF;border-radius:4px;}
.footer_logo_box .copyright{font-size:14px;color:var(--global--color-dark-gray);line-height:22px;}
.footer_logo_box .copyright span a{color:var(--global--color-orange);}
.footer-box{background:#fff;border:solid 1px #ddd}
#hostiko-footer ul li a{font-weight:300;letter-spacing:1px;transition:all ease-in-out .6s;color:#ababab}
.footer-box ul li a{font-size:14px;font-weight:300;color:var(--global--color-dark-gray);line-height:2px;}
.footer-box h5{margin-bottom:15px;font-weight:600;}
.footer_info a,.footer-box ul li a:hover{color:var(--global--color-orange)!important}
.footer_info li, .footer_info li span{color:var(--global--color-dark-gray);font-size:14px;}
.footer_info li{padding-bottom:10px;}
.footer_social_links li{display:inline-block;margin-right:5px} */
section#main-body {
    margin: 0;
    padding: 90px 0 130px;
    min-height: 350px;
    overflow: hidden;
}
.requestor-type-owner {
    background-color: var(--global--color-primary);
}
.text-success {
    color: var(--global--color-strong-red) !important;
}
/* Footer */

.footer-section{
    background: var(--global--color-very-light-gray-mostly-white);
    position: relative;
}
.footer-section .contact-section{
    margin-top: -88px;
    padding: 50px 42px 54px 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--global--box-border-radius);
    background: var(--global--color-bright-orange);
}
.footer-section .contact-section .content h3{
    font-size: 40px;
    line-height: 46px;
    margin-bottom: 17px;
    color: var(--global--color-white);
}
.footer-section .contact-section .content p{
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    color: var(--global--color-white);
}
.footer-section .contact-section .button .get_started{
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    padding: 18px 35px;
    text-transform: uppercase;
    color: var(--global--color-primary);
    background-color: var(--global--color-white);
    border: 1px solid var(--global--color-white);
    border-radius: var(--global--button-border-radius);
    transition: all 0.3s ease-in-out;
}
.footer-section .contact-section .button .get_started:hover{
    color: var(--global--color-white);
    background-color: transparent;
    border: 1px solid var(--global--color-white);
}
.footer-section .footer-logo{
    margin-bottom: 20px;
    position: relative;
}
.footer-section .middle-portion{
    padding: 90px 0;
}
.footer-section .middle-portion .logo-content{
    padding-top: 2px;
}
.footer-section .middle-portion p{
    margin-bottom: 17px;
    color: var(--global--color-text);
}
.footer-section .middle-portion .social-icons .circle{
    display: inline-block;
}
.footer-section .middle-portion .social-icons li{
    margin: 0 4px;
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .social-icons i{
    font-size: 16px;
    height: 38px;
    width: 38px;
    line-height: 38px;
    text-align: center;
    color: var(--global--color-primary);
    background: var(--global--color-white);
    border-radius: var(--global--social-icon-border-radius);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .social-icons i:hover{
    transform: translateY(-5px);
    color: var(--global--color-white);
    background: var(--global--color-bright-orange);
}
.footer-section .middle-portion .social-icons li:first-child{
    margin-left: 0;
}
.footer-section .middle-portion .social-icons li:last-child{
    margin-right: 0;
}
.footer-section .middle-portion h4{
    margin-bottom: 18px;
    color: var(--global--color-primary);
}
.footer-section .middle-portion .links{
    padding-left: 95px;
}
.footer-section .middle-portion .use-link{
    padding-left: 55px;
}
.footer-section .middle-portion .links li{
    margin-bottom: 6px;
}
.footer-section .middle-portion .links li a{
    margin-left: 12px;
    color: var(--global--color-text);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .links li i {
    font-size: 10px;
    position: relative;
    top: -1px;
    color: var(--global--color-primary);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .links li:hover a{
    color: var(--global--color-bright-orange);
}
.footer-section .middle-portion .links li:hover i{
    color: var(--global--color-bright-orange);
}
.footer-section .middle-portion .icon{
    padding-left: 38px;
}
.footer-section .middle-portion .icon .text{
    position: relative;
    margin-bottom: 14px;
    padding-left: 30px;
}
.footer-section .middle-portion .icon .location {
    top: 14px;
}
.footer-section .middle-portion .icon i{
    position: absolute;
    font-size: 14px;
    line-height: 14px;
    left: 0;
    top: 7px;
    color: var(--global--color-bright-orange);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .icon p{
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: var(--global--color-text);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .icon a{
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: var(--global--color-text);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .icon li:hover a{
    color: var(--global--color-bright-orange);
}
.footer-section .middle-portion .icon li:hover p{
    color: var(--global--color-bright-orange);
}
.footer-section .middle-portion .icon li:hover i{
    color: var(--global--color-bright-orange);
}

/* Copyright */

footer.footer {
    margin: 0;
    padding: 18px 0;
    border-top: 1px solid var(--global--color-copyright-border);
    background-color: var(--global--color-very-light-gray-mostly-white);
}
footer.footer .btn {
    font-size: 12px;
    line-height: 18px;
    padding: 10px;
    margin-right: 8px;
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border: 1px solid var(--global--color-bright-orange);
    border-radius: var(--global--button-border-radius);
    box-shadow: none;
}
footer.footer .nav-link {
    font-size: 12px;
    line-height: 18px;
    padding: 11px 26px;
    text-transform: uppercase;
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border: 1px solid var(--global--color-bright-orange);
    border-radius: var(--global--button-border-radius);
    transition: all 0.3s ease-in-out;
}
footer.footer .btn:hover {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border: 1px solid var(--global--color-primary);
}
footer.footer .nav-link:hover {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border: 1px solid var(--global--color-primary);
}
footer.footer ul{
    float: none !important;
    text-align: left !important;
    padding: 0;
    margin: 0 !important;
    display: inline-block;
}
footer.footer .nav{
    display: inline-block;
}
footer.footer .copyright {
    padding-top: 12px;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
    float: right;
    display: inline-block;
    color: var(--global--color-text);
}
/* Boxes */

#main-body h2 {
    font-size: 40px;
    line-height: 44px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--global--color-primary);
}
#main-body .primary-content h2:first-child {
    display: none;
}
.action-icon-btns a:hover .ico-container {
    font-size: inherit;
}
.action-icon-btns .card-accent-teal:hover {
    border-top: 2px solid var(--global--color-bright-orange);
}
.action-icon-btns .card-accent-pomegranate:hover {
    border-top: 2px solid var(--global--color-dark-grayish-cyan);
}
.action-icon-btns .card-accent-sun-flower:hover {
    border-top: 2px solid var(--global--color-primary);
}
.action-icon-btns .card-accent-asbestos:hover {
    border-top: 2px solid var(--global--color-dark-grayish-cyan);
}
.action-icon-btns .card-accent-green:hover {
    border-top: 2px solid var(--global--color-bright-orange);
}
.action-icon-btns a {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    padding: 30px 10px 40px;
    color: var(--global--color-primary);
    background: var(--global--color-white);
    box-shadow: 1px 2px 61px 0px rgba(0, 0, 0, 10%);
    border-radius: var(--global--box-border-radius);
    border-top: 2px solid var(--global--color-white);
    transition: all 0.3s ease-in-out;
}
.action-icon-btns a .ico-container i {
    font-size: 28px;
    width: 75px;
    height: 75px;
    line-height: 75px;
    border-radius: var(--global--social-icon-border-radius);
    color: var(--global--color-white);
    background-color: var(--global--color-very-dark-desaturated-blue);
}
.primary-content .card-accent-teal i{
    background-color: var(--global--color-bright-orange) !important;
}
.primary-content .card-accent-pomegranate i{
    background-color: var(--global--color-dark-grayish-cyan) !important;
}
.primary-content .card-accent-sun-flower i{
    background-color: var(--global--color-primary) !important;
}
.primary-content .card-accent-asbestos i{
    background-color: var(--global--color-dark-grayish-cyan) !important;
}
.primary-content .card-accent-green i{
    background-color: var(--global--color-bright-orange) !important;
}
.primary-content .action-icon-btns .card-accent-midnight-blue:hover {
    border-top: 2px solid var(--global--color-very-dark-desaturated-blue);
}

/* Pricing */

.pricing-carousel {
    padding: 100px 0 160px;
    background-color: var(--global--color-very-light-gray-bg);
}
.pricing-carousel h2{
    font-size: 40px;
    line-height: 40px;
    text-transform: capitalize;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: var(--global--color-primary);
}
.pricing-carousel .nav-tabs {
    text-align: center;
    padding-bottom: 30px; 
    display: inline-block;
    border: solid 0px var(--global--color-primary);
    width: 100%;
    position: relative;
}
.pricing-carousel .nav-tabs:after {
    content: "";
    width: 68%;
    background-color: var(--global--color-very-light-gray);
    height: 2px;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    bottom: 29px;
}
.pricing-carousel .nav-tabs .nav-link {
    list-style: none;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    padding: 20px 20px 28px 20px;
    color: var(--global--color-primary);
    margin: 0 !important;
    position: relative;
    border: none;
}
.pricing-carousel .nav-tabs .nav-item {
    display: inline-block;
}
.pricing-carousel .nav-tabs .nav-link.active {
    color: var(--global--color-bright-orange);
    background-color: transparent;
    border-bottom: 2px solid var(--global--color-bright-orange);
    position: relative;
    z-index: 2;
}
.pricing-carousel .nav-tabs .nav-item.active::after {
    content: "";
    width: 200px;
    background-color: var(--global--color-strong-cyan);
    height: 2px;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    display: inline-block;
}
.pricing-carousel .tab-content .item {
    float: left;
    width: 95% !important;
    padding: 48px 20px;
    margin: 30px 6px 0;
    border-radius: var(--global--button-border-radius);
    background-color: var(--global--color-white);
}
.pricing-carousel .tab-content .item span{
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
    color: var(--global--color-primary);
}
.pricing-carousel .tab-content .item .product-pricing{
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 20px;
}
.pricing-carousel .tab-content .item .price{
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    margin-bottom: 0 !important;
    display: inline-block;
    color: var(--global--color-primary);
}
.pricing-carousel .tab-content .item .feature-value {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 2px;
    color: var(--global--color-primary);
}
.pricing-carousel .tab-content .item .product-desc p{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}
.pricing-carousel .tab-content .item .product-desc ul{
    padding-left: 20px;
    margin-bottom: 36px;
}
.pricing-carousel .tab-content .item .product-desc > strong{
    font-size: 16px;
    line-height: 24px;
}
.pricing-carousel .tab-content .item .product-desc li{
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 12px;
    color: var(--global--color-primary);
}
.pricing-carousel .tab-content .item .product-desc li::marker{
    font-size: 16px;
    color: var(--global--color-primary);
}
.pricing-carousel .tab-content .item br{
    display: none;
}
.pricing-carousel .btn-success{
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
}
.pricing-carousel .btn-success:hover {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
}
.pricing-carousel .tab-content .owl-carousel.owl-drag .owl-item{
    margin-bottom: 12px;
}
.pricing-carousel .tab-content .owl-carousel .owl-item img {
    display: inline-block;
    width: 57px;
}
.pricing-carousel .tab-content .owl-carousel .owl-dots {
    position: absolute;
    display: block !important;
    margin-top: 15px !important;
    line-height: 0;
    left: 0;
    right: 0;
    text-align: center;
}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot span {
    background: var(--global--color-grayish-blue);
    width: 12px;
    height: 12px;
    margin: 0 4px;
    transition: all 0.3s ease-in-out;
    display: block;
    border-radius: 100px;
}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot:hover span {
    background: var(--global--color-bright-orange);
}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot.active span {
    background:var(--global--color-bright-orange);
    width: 16px;
    height: 16px;
}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot:focus {
    outline: none;
}
.hostiko-banner-whmcs .title-heading {
    font-size: 56px;
    line-height: 60px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--global--color-white);
}
.hostiko-banner-whmcs .title-text {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    padding: 0 300px;
    margin-bottom: 25px;
    color: var(--global--color-white);
}
.breadcrumb-item.active {
    color: var(--global--color-white);
}
.hostiko-banner-whmcs .breadcrumb {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    padding: 14px 35px;
    text-transform: uppercase;
    color: var(--global--color-white);
    background: transparent;
    border: 2px solid var(--global--color-breadcrumb-border);
    border-radius: var(--global--button-border-radius);
    display: -webkit-inline-box;
}
.hostiko-banner-whmcs .breadcrumb .breadcrumb-item a{
    color: var(--global--color-white);
}
.breadcrumb-item+.breadcrumb-item::before {
    color: var(--global--color-white);
}
.dropdown-divider {
    border-top: 1px solid var(--global--color-very-light-gray);
}
.primary-content .card .announcements h1 a{
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    text-decoration: none !important;
    color: var(--text-heading);
}
.primary-content .card .announcements a i{
    margin-left: 5px;
}
.card .card-body h1{
    margin-bottom: 20px;
}
.btn-default {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
.btn-default:hover {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.primary-content .announcements .btn-sm {
    padding: 6px 10px;
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--global--color-white) !important;
    text-decoration: none;
    background-color: var(--global--color-bright-orange);
}
header.header .dropdown-item.active, header.header .dropdown-item:active {
    background-color: var(--global--color-bright-orange);
}
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.btn.focus, .btn:focus {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
    box-shadow: none !important;
}
#order-standard_cart .products .product footer {
    padding: 0 15px;
}
.top-bar .input-group .btn i{
    color: var(--global--color-white);
}
.domain-promo-box .btn-warning{
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
.domain-promo-box .btn-warning:hover{
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.domain-promo-box .btn-primary{
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.domain-promo-box .btn-primary:hover{
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
.card .badge-info {
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border-radius: var(--global--button-border-radius);
}
.card .badge {
    padding: 6px 8px;
}
.card .list-inline-item{
    padding: 0 !important;
}
.card .badge-pill{
    padding: 15px 0 0;
    line-height: 18px;
    margin-bottom: 18px;
    text-align: left;
    text-wrap: wrap;
    color: var(--global--color-primary);
    background-color: transparent;
}
.card-body .btn-secondary {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.card-body .btn-secondary:hover {
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
.md-header .btn-group .btn-sm{
    border-radius: 0 !important;
}
.extra-padding .btn-primary{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
}
.extra-padding .btn-primary:hover{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
}
.ticket-actions .btn-danger{
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
}
.ticket-actions .btn-danger:hover{
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.panel-heading .panel-minimise{
    position: relative;
    top: 10px;
}
.table-striped tr td .btn{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
    opacity: 1 !important;
    margin-bottom: 6px;
}
.table-striped tr td .btn:hover{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
}
.btn-info {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.btn-info:hover {
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
}
.primary-content .alert-info {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.secondary-cart-body .view-cart-items-header {
    background-color: var(--global--color-very-dark-black-blue);
}
.summary-container .btn-success {
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
#order-standard_cart .order-summary{
    background-color: var(--global--color-black) !important;
    border-bottom: 3px solid var(--global--color-black) !important;
}
.form-group .generate-password{
    font-size: 14px;
    line-height: 20px;
    padding: 6px 12px;
}
.card-accent-emerald .btn-success {
    padding: 5px 10px;
}
.card-sidebar .card-minimise{
    position: relative;
    top: 10px;
}
.card-accent-gold .card-title{
    color: var(--global--color-black);
}
.card-accent-red .card-title{
    color: var(--global--color-black);
}
.card-accent-blue .card-title{
    color: var(--global--color-black);
}
.card-accent-emerald .card-title{
    color: var(--global--color-black);
}
.card-accent-asbestos .card-title{
    color: var(--global--color-black);
}
.card-accent-emerald .card-body .btn-success{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
}
.card-accent-emerald .card-body .btn-success:hover{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
}
.card-accent-emerald .card-body .btn:hover{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
}
.client-home-cards .card-accent-asbestos i {
    background-color: transparent !important;
}
.btn-primary {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
.btn-primary:hover {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.btn-primary:disabled {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
    opacity: 1;
}
#order-standard_cart .font-size-36 {
    text-align: center;
    margin-bottom: 15px;
}
#order-standard_cart .view-cart-items-header {
    background-color: var(--global--color-black) !important;
}
#order-standard_cart .view-cart-items {
    border-bottom: 2px solid var(--global--color-black) !important;
}
#order-standard_cart .empty-cart .btn {
    background-color: var(--global--color-black) !important;
}
#order-standard_cart .empty-cart .btn:hover {
    background-color: var(--global--color-primary) !important;
}
.client-home-cards .card-header .btn {
    padding: 4px 10px;
}
.sidebar .list-group-item .badge {
    font-size: 11px;
    line-height: 11px;
}
.primary-content .alert .btn-xs {
    padding: 2px 8px;
}
.domain-renewals .domain-renewal .label {
    border-radius: 15px;
    padding: 4px 10px;
}
.domain-renewals .domain-renewal .label-info {
    background-color: var(--global--color-black);
}
.table-striped .label-info {
    background-color: var(--global--color-primary);
}
.primary-content .card-title{
    font-size: 28px;
    line-height: 34px;
}
.primary-content .client-home-cards .card-title{
    font-size: 16px;
    line-height: 20px;
}
.primary-content .card .h5 {
    color: var(--global--color-primary);
}
.primary-content .card .list-group-flush a {
    color: var(--global--color-primary);
}
.primary-content .card .list-group-flush .list-group-item i{
    position: absolute;
    left: 14px;
    top: 16px;
}
.primary-content .card .list-group-flush .list-group-item {
    padding: 12px 20px 12px 40px;
}
.kb-article-item small {
    padding-left: 0;
    color: var(--global--color-text);
}
@media screen and (min-width:1200px){
.container {max-width: 1170px; margin: auto;}
.top-bar-section .container {max-width: 1320px; margin: auto;}
.topbar .container {max-width: 1320px; margin: auto;}
header .navbar .container {max-width: 1320px; margin: auto;}
}
@media screen and (max-width:1440px){
#header .navbar-collapse ul li a:hover{background-color:transparent!important;}
.primary-content .card-title {font-size: 26px; line-height: 32px;}
.primary-content .client-home-cards .card-title{font-size: 16px; line-height: 20px;}
#header .navbar.navbar-light {margin-bottom: -85px;}
/* Search */
.hostiko-domain-search .home-domain-search {padding: 60px 0px;}
/* Pricing Carousel */
.pricing-carousel {padding: 75px 0 135px;}
/* Footer */
.footer-section .contact-section {margin-top: -74px; padding: 40px 30px 40px 32px}
.footer-section .contact-section .content h3 {font-size: 36px; line-height: 38px;}
.footer-section .contact-section .button .get_started {padding: 16px 30px;}
.footer-section .middle-portion {padding: 85px 0 70px;}
.footer-section .middle-portion .logo-content {padding-top: 0;}
.footer-section .middle-portion h4 {font-size: 18px; line-height: 18px;}
.footer-section .middle-portion .links {padding-left: 85px;}
.footer-section .middle-portion .use-link {padding-left: 25px;}
.footer-section .middle-portion .links .list1 {margin-right: 62px;}
.footer-section .middle-portion .icon {padding-left: 0;}
.footer-section .middle-portion .icon .text2 {margin-bottom: 16px;}
}
@media screen and (max-width:1199px){
#main-body h2 {
    font-size: 36px;
    line-height: 36px;
}
section#main-body {padding: 80px 0 120px;}
/* Header */
.hostiko-banner-whmcs .title-heading {font-size: 48px !important; line-height: 52px !important; margin-bottom: 12px;}
.hostiko-banner-whmcs .title-text {padding: 0 155px; margin-bottom: 20px;}
#header .navbar.navbar-light {padding: 15px 0; margin-bottom: -78px;}
header#header.header .main-navbar-wrapper {position: absolute; top: 78px; right: 16px; width: auto; background: var(--global--color-white); z-index: 4; border-radius: 0 0 20px 20px; padding: 25px 20px!important; box-shadow: 1px 2px 60px 0px rgba(0,0,0,0.1); display: none;}
header#header.header .main-navbar-wrapper:has(.navbar-collapse.collapse.show) {display: block !important;}
#header.header .search {border: 1px solid var(--global--color-very-light-gray) !important; border-radius: var(--global--button-border-radius);}
#header .navbar-collapse a {padding: 10px 0px !important; border-bottom: 1px solid var(--global--color-very-light-gray); color: var(--global--color-primary);}
#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a {display: block !important; color: var(--global--color-primary) !important; padding: 10px 0px 0 !important; background-color: transparent !important; border-radius: 0; border: none; font-size: 14px; font-weight: 500; margin: 0;}
#header .dropdown-menu {position: relative; top: -3px; border-radius: 0; border: none; background: var(--global--color-very-light-gray-mostly-white);}
#header .main-navbar-wrapper .dropdown-menu a {font-size: 12px; border: none; padding: 0 40px!important; line-height: 30px; position: relative;}
#header .main-navbar-wrapper .dropdown-menu a::before {content: "\f054"; position: absolute; left: 22px; top: 10px; font-size: 10px; line-height: 10px; color: var(--text-body); font-family: "Font Awesome 5 Pro";}
.hostiko-banner-whmcs {padding: 80px 0 55px;}
#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a:hover {background-color: transparent !important; border: none; color: var(--global--color-bright-orange) !important;}
/* Search */
.hostiko-domain-search .home-domain-search {padding: 50px 0px;}
.hostiko-domain-search .home-domain-search h2 {font-size: 36px; line-height: 36px;}
.home-domain-search .input-group-wrapper {margin: 22px 0;}
.hostiko-domain-search .home-domain-search .tld-logos li {font-size: 18px; line-height: 24px; padding: 0 30px;}
/* Pricing Carousel */
.pricing-carousel {padding: 70px 0 132px;}
.pricing-carousel h2 {font-size: 36px; line-height: 36px;}
.pricing-carousel .nav-tabs {padding-bottom: 25px;}
.pricing-carousel .nav-tabs:after {width: 78%; bottom: 24px;}
.pricing-carousel .nav-tabs .nav-link {padding: 22px 16px;}
.pricing-carousel .tab-content .item {padding: 40px 25px; margin: 25px 6px 0;}
.pricing-carousel .tab-content .item .product-desc p {margin-bottom: 12px;}
.pricing-carousel .tab-content .item .product-desc ul {margin-bottom: 25px;}
.pricing-carousel .tab-content .item .product-pricing {margin-bottom: 15px;}
.pricing-carousel .btn-success {padding: 9px;}
/* Boxes */
.action-icon-btns a {font-size: 16px; line-height: 22px; padding: 25px 10px 35px}
/* Footer */
h3 {font-size: 32px; line-height: 38px;}
.footer-section .contact-section {margin-top: -74px; padding: 45px 25px;}
.footer-section .contact-section .content h3 {font-size: 32px; line-height: 36px; margin-bottom: 10px;}
.footer-section .contact-section .button .get_started {padding: 15px 24px;}
.footer-section .middle-portion {padding: 80px 0 70px;}
.footer-section .footer-logo {margin-bottom: 20px;}
.footer-section .footer-logo img{width: 150px;}
.footer-section .middle-portion h4 {margin-bottom: 16px;}
.footer-section .middle-portion p {margin-bottom: 6px;}
.footer-section .middle-portion .links {padding-left: 45px;}
.footer-section .middle-portion .use-link {padding-left: 10px;}
.footer-section .middle-portion .links .list1 {margin-right: 45px;}
.footer-section .middle-portion .links li {margin-bottom: 4px;}
.footer-section .middle-portion .links li a {margin-left: 10px;}
.footer-section .middle-portion .icon {padding-left: 0;}
.footer-section .middle-portion .icon .text {margin-bottom: 10px;}
.footer-section .middle-portion .icon .text2 {margin-bottom: 18px;}
.footer-section .copyright {padding: 16px 0px;}
/* Copyright */
footer.footer .btn {padding: 9px 11px; margin-right: 6px;}
footer.footer .nav-link {padding: 10px 22px;}
footer.footer .copyright {padding-top: 10px;}
}
@media screen and (max-width:991px){
#main-body h2 {
    font-size: 32px;
    line-height: 32px;
}
h1{
    font-size: 34px !important;
    line-height: 38px !important;
}
/* h1 a{
    font-size: 34px !important;
    line-height: 38px !important;
} */
section#main-body {padding: 60px 0 90px;}
.main-header{padding-top:10px;padding-bottom:10px;}
.main-header .navbar-toggler{padding:.25rem .5rem;background-color:var(--global--color-orange);}
.main-header .navbar-toggler:focus{outline:none;}
.main-header .navbar-toggler-icon{background:url(assets/images/mobile_toogle_button.svg);}  
.main-header .navbar-collapse{position:absolute;right:0;top:100%;background-color:var(--global--color-blue);width: 30%;padding: 10px 0; z-index:9}
.main-header ul li a{padding:10px 20px!important;color:var(--global--color-white)}
.primary-content a{margin-bottom: 10px;}
/* Header */
.hostiko-banner-whmcs .title-heading {font-size: 40px !important; line-height: 46px !important; margin-bottom: 10px;}
.hostiko-banner-whmcs .title-text {padding: 0 60px; margin-bottom: 16px;}
.hostiko-banner-whmcs {padding: 70px 0 45px;}
.hostiko-banner-whmcs .breadcrumb {font-size: 14px; line-height: 20px; padding: 12px 30px; display: inline-flex;}
#header .navbar.navbar-light {padding: 12px 0; margin-bottom: -72px;}
#header .navbar-brand img{width: 150px;}
header#header.header .main-navbar-wrapper {top: 72px; right: 38px;}
#header .navbar-collapse a {font-size: 14px; padding: 8px 0px !important;}
#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a {padding: 8px 0px 0 !important; font-size: 14px;}
#header .dropdown-menu {padding: 10px 0;}
#header .main-navbar-wrapper .dropdown-menu a {padding: 0 45px!important; line-height: 28px; position: relative;}
#header .main-navbar-wrapper .dropdown-menu a::before {top: 9px; left: 26px;}
.dropdown-divider {margin: 6px 0;}
/* Search */
.hostiko-domain-search .home-domain-search {padding: 15px 0px 20px;}
.hostiko-domain-search .home-domain-search h2 {font-size: 32px; line-height: 32px; margin-bottom: 52px;}
.hostiko-domain-search .home-domain-search .btn-primary{padding: 10px 24px;}
.hostiko-domain-search .home-domain-search .btn-success {padding: 10px 20px;}
.hostiko-domain-search .home-domain-search .input-group-wrapper {padding: 9px 10px 9px 20px;}
.hostiko-domain-search .home-domain-search .tld-logos li {font-size: 16px; line-height: 22px; padding: 0 20px;}
/* Pricing Carousel */
.pricing-carousel {padding: 40px 0 100px;}
.pricing-carousel h2 {font-size: 32px; line-height: 32px;}
.pricing-carousel .tab-content .item .price {font-size: 30px; line-height: 38px;}
.pricing-carousel .nav-tabs:after {width: 95%;}
.pricing-carousel .nav-tabs .nav-link {padding: 18px 8px;}
.pricing-carousel .tab-content .item {padding: 35px 30px; margin: 15px 10px 0;}
.pricing-carousel .tab-content .item span {margin-bottom: 12px;}
.pricing-carousel .tab-content .item .product-desc p {margin-bottom: 8px;}
.pricing-carousel .tab-content .item .product-desc li {margin-bottom: 6px;}
.pricing-carousel .tab-content .item .product-pricing {font-size: 14px; margin-bottom: 14px;}
.pricing-carousel .btn-success {padding: 8px;}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot span {width: 10px; height: 10px;}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot.active span {width: 14px; height: 14px;}
/* Boxes */
.action-icon-btns a {padding: 20px 10px 30px; margin-bottom: 30px;}
.action-icon-btns a .ico-container i {font-size: 26px; width: 70px; height: 70px; line-height: 70px;}
/* Footer */
h3 {font-size: 30px; line-height: 36px;}
.text-size-18 {font-size: 16px; line-height: 24px;}
.footer-section .contact-section {display: block; margin-top: -85px; padding: 55px 25px 70px;}
.footer-section .contact-section .content{text-align: center;}
.footer-section .contact-section .content h3 {margin-bottom: 10px;}
.footer-section .contact-section .content p {margin-bottom: 30px !important;}
.footer-section .contact-section .button{text-align: center;}
.footer-section .contact-section .button .get_started {padding: 13px 20px;}
.footer-section .footer-logo {margin-bottom: 15px;}
.footer-section .footer-logo img {width: 140px;}
.footer-section .middle-portion {padding: 70px 0;}
.footer-section .middle-portion h4 {margin-bottom: 14px;}
.footer-section .middle-portion p {margin-bottom: 12px;}
.footer-section .middle-portion .social-icons li {margin: 0 2px;}
.footer-section .middle-portion .social-icons i {font-size: 14px; height: 36px; width: 36px; line-height: 36px;}
.footer-section .middle-portion .links {padding-left: 30px;}
.footer-section .middle-portion .use-link {padding-left: 0;}
.footer-section .middle-portion .links li a {margin-left: 8px;}
.footer-section .middle-portion .icon p {font-size: 14px; line-height: 22px;}
.footer-section .middle-portion .icon a {font-size: 14px; line-height: 22px;}
.footer-section .middle-portion .icon .text {margin-bottom: 8px; padding-left: 24px;}
/* Copyright */
footer.footer {padding: 16px 0;}
footer.footer .btn {padding: 8px 12px; margin-right: 5px;}
footer.footer .nav-link {padding: 9px 20px;}
footer.footer .copyright {padding-top: 9px;}
.btn-success {font-size: 12px; padding: 8px;}
#order-standard_cart .sidebar-collapsed {padding: 0 !important;}
.featured-tlds-container .col-sm-2{display: none;}
.primary-content .card-body .disable-on-click{position: relative; top: -5px;}
.card .badge-pill {padding: 6px 0 0;}
}
@media screen and (max-width:767px){
#main-body h2 {
    font-size: 26px;
    line-height: 34px;
}
h1 {
    font-size: 30px !important;
    line-height: 34px !important;
}
/* h1 a {
    font-size: 30px !important;
    line-height: 34px !important;
} */
section#main-body {padding: 40px 0 80px;}
.footer-box .container{max-width:100%}
.padding_bottom_70{padding-bottom:40px;}
.padding_top_70{padding-top:50px;}
.main-header .navbar-toggler{padding:.25rem .3rem}
.dataTables_wrapper .dataTables_info {padding: 9px 10px 20px;}
.primary-content .card-title {font-size: 20px; line-height: 26px;}
.primary-content .client-home-cards .card-title{font-size: 16px; line-height: 20px;}
.primary-content .card .announcements h1 a {font-size: 30px; line-height: 36px;}
/* Header */
.hostiko-banner-whmcs .title-heading {font-size: 32px !important; line-height: 40px !important; margin-bottom: 8px;}
.hostiko-banner-whmcs .title-text {font-size: 14px; line-height: 22px; padding: 0 40px; margin-bottom: 14px;}
.hostiko-banner-whmcs {padding: 60px 0 40px;}
.hostiko-banner-whmcs .breadcrumb {padding: 10px 25px; font-size: 12px; line-height: 18px;}
#header .navbar-brand img{width: 135px;}
header#header.header .main-navbar-wrapper {right: 32px;}
#header.header form .btn {font-size: 14px;}
#header.header .search .form-control {padding: 3px !important;}
#header .dropdown-menu {padding: 8px 0;}
#header .main-navbar-wrapper .dropdown-menu a {padding: 0 40px!important; line-height: 26px;}
#header .main-navbar-wrapper .dropdown-menu a::before {left: 22px; top: 8px; font-size: 9px; line-height: 9px;}
.home-domain-search .tld-logos li {padding: 0 25px 0 0;}
.home-domain-search .tld-logos img {width: 45px;}
.hostiko-domain-search .home-domain-search .btn-link {padding: 16px 10px 10px!important;}
.primary-content .card .h5 {font-size: 18px; line-height: 18px;}
/* Search */
.hostiko-domain-search .home-domain-search {padding: 5px 0px 10px;}
.hostiko-domain-search .home-domain-search .container .clearfix{padding: 20px !important;}
.hostiko-domain-search .home-domain-search h2 {font-size: 26px; line-height: 34px; margin-bottom: 46px;}
.hostiko-domain-search .home-domain-search .btn-primary {font-size: 12px; padding: 9px 22px;}
.hostiko-domain-search .home-domain-search .btn-success {font-size: 12px; padding: 9px 18px;}
.hostiko-domain-search .home-domain-search .input-group-wrapper {padding: 8px 10px 8px 12px;}
.home-domain-search .input-group-wrapper {margin: 18px 0;}
.hostiko-domain-search .home-domain-search .tld-logos li {font-size: 14px; line-height: 20px; padding: 0 18px;}
/* Pricing Carousel */
.pricing-carousel {padding: 30px 0 90px;}
.pricing-carousel h2 {font-size: 26px; line-height: 34px;}
.pricing-carousel .nav-tabs .nav-link {font-size: 12px; padding: 14px 6px;}
.pricing-carousel .tab-content .item {padding: 25px 30px; margin: 10px 12px 0;}
.pricing-carousel .tab-content .item .product-desc p {font-size: 14px; line-height: 22px;}
.pricing-carousel .tab-content .item .product-desc > strong {font-size: 14px; line-height: 22px;}
.pricing-carousel .tab-content .item span {font-size: 16px; line-height: 22px; margin-bottom: 10px;}
.pricing-carousel .tab-content .item .product-desc ul {padding-left: 20px; margin-bottom: 20px;}
.pricing-carousel .btn-success {font-size: 12px; line-height: 12px; padding: 12px;}
/* Footer */
h3 {font-size: 28px; line-height: 32px;}
h4 {font-size: 22px; line-height: 26px;}
.footer-section .contact-section {padding: 45px 20px 58px;}
.footer-section .contact-section .content h3 {font-size: 26px; line-height: 32px; margin-bottom: 8px;}
.footer-section .contact-section .content p {font-size: 14px; line-height: 20px; margin-bottom: 25px !important;}
.footer-section .contact-section .button .get_started {font-size: 12px; line-height: 12px; padding: 11px 18px;}
.footer-section .middle-portion {padding: 58px 0 48px;}
.footer-section .middle-portion .logo-content {text-align: center; padding-left: 0; margin-bottom: 30px;}
.footer-section .footer-logo {margin-bottom: 14px;}
.footer-section .middle-portion p {margin-bottom: 14px;}
.footer-section .middle-portion h4 {margin-bottom: 12px;}
.footer-section .middle-portion .links {padding-left: 0; margin-bottom: 25px;}
.footer-section .middle-portion .icon {padding-left: 0;}
.footer-section .middle-portion .icon i {font-size: 14px; line-height: 14px; top: 6px;}
.footer-section .middle-portion .icon .location {top: 6px;}
.footer-section .middle-portion .icon a {font-size: 14px; line-height: 20px;}
.footer-section .middle-portion .icon .text {margin-bottom: 6px;}
/* Copyright */
footer.footer {padding: 14px 0;}
footer.footer .btn {padding: 6px; margin-right: 3px;}
footer.footer .nav-link {padding: 7px 10px;}
footer.footer .copyright {padding-top: 7px;}
/* Boxes */
.action-icon-btns a {padding: 16px 10px 24px;}
.action-icon-btns a .ico-container i {font-size: 24px; width: 65px; height: 65px; line-height: 65px;}
/* All responsive */
.primary-content .card-body .announcements .announcement {margin-bottom: 40px;}
.sidebar.sidebar-secondary {padding: 20px 0;}
.primary-content .card .card-body .col-form-label {text-align: left !important; font-size: 14px !important; line-height: 20px !important;}
.primary-content .card-body .table-striped .table td, .table th {padding: 8px;}
#order-standard_cart .domains-row {position: relative; left: -30px; width: 120%;}
#order-standard_cart .domain-selection-options .clearfix .btn-block{width: 150%;}
.btn-lg {padding: 4px 16px;}
.input-group-lg>.form-control{font-size: 16px;}
.input-group-lg>.input-group-append>.btn {padding: 4px 16px;}
.primary-content .card-body a{font-size: 14px; line-height: 14px; padding: 6px 10px;}
.primary-content .card-body .disable-on-click{font-size: 14px; line-height: 14px; padding: 6px 10px;}
}
@media screen and (max-width:575px){
/* #main-body h2 {
    font-size: 28px;
    line-height: 34px;
} */
h1 {
    font-size: 24px !important;
    line-height: 32px !important;
}
/* h1 a {
    font-size: 24px !important;
    line-height: 32px !important;
} */
.h3, h3 {
    font-size: 26px;
    line-height: 30px;
}
h4 {
    font-size: 16px;
    line-height: 22px;
}
.btn-sm {
    font-size: 12px;
    line-height: 20px;
}
.input-group .input-group-append .btn {
    font-size: 12px;
    line-height: 20px;
}
.primary-content .card-body .disable-on-click {top: -3px;}
#order-standard_cart .domains-row {left: 0 !important; width: 100% !important;}
#order-standard_cart .domain-selection-options .clearfix .btn-block{width: 100% !important;}
footer.footer{padding-bottom:50px;}
.footer_logo_box{text-align:center;}
.footer_logo_box img{width:30%}
.footer_box{display:none;}
.primary-content .home .card{min-height:auto}
.home-domain-search .p-5{padding:0!important}
.home-domain-search{padding-top:40px;padding-bottom:40px;}
.h2, h2{font-size:1.5rem;}
#default-captcha-domainchecker{font-size:14px;}
.main-header .navbar-collapse{width:50%;}
.tab-content .tab-pane .btn-group-sm{width: 100%;}
/* Header */
.hostiko-banner-whmcs {padding: 55px 0 35px; background-position: center;}
.hostiko-banner-whmcs .title-heading {margin-bottom: 6px;}
.hostiko-banner-whmcs .title-text {padding: 0 15px;}
.hostiko-banner-whmcs .breadcrumb {padding: 8px 20px;}
header#header.header .main-navbar-wrapper {right: 14px;}
.primary-content .card .h5 {font-size: 16px; line-height: 16px;}
#header .navbar-brand img {width: 125px;}
/* Search */
.hostiko-domain-search .home-domain-search .container .clearfix {padding: 0 !important;}
.hostiko-domain-search .home-domain-search {padding: 55px 0px 50px;}
.hostiko-domain-search .home-domain-search h2 {margin-bottom: 36px;}
.hostiko-domain-search .home-domain-search .input-group-wrapper {padding: 5px 10px;}
.home-domain-search .input-group-wrapper {margin: 20px 0;}
.hostiko-domain-search .home-domain-search .btn-primary {padding: 7px 15px; margin-bottom: 20px;}
.hostiko-domain-search .home-domain-search .btn-success {padding: 7px 15px; margin-bottom: 20px;}
.hostiko-domain-search .home-domain-search .tld-logos {display: flex; margin-bottom: 10px;}
.home-domain-search .tld-logos li {float: none; padding: 18px 0px;}
.hostiko-domain-search .home-domain-search .btn-link {font-size: 12px; padding: 6px 5px!important;}
.hostiko-domain-search .home-domain-search .tld-logos li {font-size: 12px; line-height: 20px; padding: 0 10px;}
/* Pricing Carousel */
/* .pricing-carousel h2 {font-size: 28px;} */
.pricing-carousel .nav-tabs .nav-link {padding: 6px;}
.pricing-carousel .nav-tabs:after {display: none;}
.pricing-carousel .tab-content .item {padding: 25px 30px; margin: 10px 8px 0;}
.pricing-carousel .tab-content .item .product-desc li {font-size: 12px; line-height: 18px;}
.pricing-carousel .tab-content .item .product-pricing {font-size: 12px;}
.pricing-carousel .btn-success {padding: 10px;}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot span {width: 8px; height: 8px;}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot.active span {width: 12px; height: 12px;}
.pricing-carousel .tab-content .owl-carousel button.owl-dot {margin: 0 -1px;}
/* Footer */
h3 {font-size: 24px; line-height: 30px;}
.text-size-18 {font-size: 14px; line-height: 20px;}
.footer-section .contact-section .content h3 {margin-bottom: 8px;}
.footer-section .contact-section .button .get_started {padding: 10px 14px;}
.footer-section .middle-portion .logo-content {margin-bottom: 25px;}
.footer-section .middle-portion {padding: 58px 0 50px;}
.footer-section .middle-portion .links .list1 {margin-right: 80px;}
/* Copyright */
footer.footer {padding: 15px 0; text-align: center;}
footer.footer .btn {font-size: 10px; line-height: 16px; padding: 5px 8px; margin-right: 2px;}
footer.footer .nav-link {font-size: 10px; line-height: 16px; padding: 5px 10px;}
footer.footer .copyright {padding-top: 15px; float: none;}
.table-container .dataTables_wrapper {width: 100%; overflow-x: auto; padding-bottom: 20px;}
.primary-content .card {margin-bottom: 35px;}
.primary-content .card-body a{margin-bottom: 6px;}
.primary-content .card-title {font-size: 18px; line-height: 24px;}
.primary-content .card .announcements h1 a {font-size: 24px; line-height: 30px;}
.md-editor .btn-toolbar .btn-group {margin-right: 0;}
.table-striped tr td .btn {font-size: 10px; line-height: 10px};
.sidebar .card{margin-bottom: 15px;}
}

/* ===================================================================
   Cuerpo del Home -- estilo calcado de cruechone.com (fondo oscuro,
   tarjetas con borde sutil en vez de sombra pesada, texto claro).
   Se preservan TODOS los bloques funcionales que WHMCS trae y que el
   frontstore no tiene (buscador de dominio, accesos "Como podemos
   ayudarle" y "Su cuenta", carrusel de precios) -- solo se re-pinta.
   =================================================================== */
#main-body {
    background: var(--surface-page);
}
#main-body h2 {
    color: var(--text-heading);
}

/* Logo: dos variantes en el DOM, se muestra una segun el tema */
.logo-light-mode { display: none; }
html.theme-light .logo-dark-mode { display: none; }
html.theme-light .logo-light-mode { display: inline-block; }

/* Toggle de tema -- icono muestra el modo AL QUE CAMBIA al hacer clic */
#cruechThemeToggle { color: var(--topbar-icon) !important; }
#cruechThemeToggle .theme-icon-dark { display: none; }
#cruechThemeToggle .theme-icon-light { display: inline-block; }
html.theme-light #cruechThemeToggle .theme-icon-dark { display: inline-block; }
html.theme-light #cruechThemeToggle .theme-icon-light { display: none; }

/* Buscador de dominio */
.hostiko-domain-search .home-domain-search {
    background-color: var(--surface-page) !important;
}
.hostiko-domain-search .home-domain-search h2 {
    color: var(--text-heading);
}
.home-domain-search .input-group-wrapper {
    background: var(--surface-card) !important;
    box-shadow: none;
    border: 1px solid var(--border-subtle);
}
.home-domain-search .form-control {
    color: var(--text-body);
}
.hostiko-domain-search .home-domain-search .tld-logos li {
    color: var(--text-body);
    border-right-color: var(--border-subtle);
}
.hostiko-domain-search .home-domain-search .btn-link {
    color: var(--text-body);
}
.hostiko-domain-search .home-domain-search .btn-link:hover {
    color: var(--global--color-bright-orange);
}

/* Tarjetas de grupos de producto ("Registra tu dominio", etc) */
.primary-content .home .card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    box-shadow: none;
}
.primary-content .home .card .card-title,
.primary-content .home .card p {
    color: var(--text-body);
}

/* "Como podemos ayudarle" y "Su cuenta" -- grilla de accesos */
.action-icon-btns a {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    box-shadow: none;
    color: var(--text-body);
}
.action-icon-btns a:hover {
    border: 1px solid var(--global--color-bright-orange);
}

/* Carrusel de precios */
.pricing-carousel {
    background-color: var(--surface-page);
}
.pricing-carousel h2,
.pricing-carousel .nav-tabs .nav-link,
.pricing-carousel .tab-content .item span,
.pricing-carousel .tab-content .item .price,
.pricing-carousel .tab-content .item .feature-value,
.pricing-carousel .tab-content .item .product-desc li,
.pricing-carousel .tab-content .item .product-desc li::marker {
    color: var(--text-body);
}
.pricing-carousel .tab-content .item {
    background-color: var(--surface-card);
    border: 1px solid var(--border-subtle);
}

/* ===================================================================
   Generico para TODO el area de cliente (login, facturas, tickets,
   servicios, base de conocimientos, etc) -- estos usan los componentes
   base de Bootstrap (.card, .panel, .table, .form-control) sin scope a
   #main-body, asi que se corrigen una sola vez aqui para que todas las
   paginas respondan al tema oscuro/claro.
   =================================================================== */
body {
    background-color: var(--surface-page);
    color: var(--text-body);
}
.card, .panel, .panel-default {
    background-color: var(--surface-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-body);
}
.card-header, .panel-heading {
    background-color: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-subtle);
}
.panel-body {
    color: var(--text-body);
}
.card-title, .card-body, .card-text, h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
}
.list-group-item {
    background-color: var(--surface-card);
    color: var(--text-body);
    border-color: var(--border-subtle);
}
.form-control, select.form-control, textarea.form-control {
    background-color: var(--surface-page) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-subtle) !important;
}
.form-control::placeholder {
    color: var(--global--color-dark-grayish-cyan);
}
.input-group-text {
    background-color: var(--surface-card);
    color: var(--text-body);
    border: 1px solid var(--border-subtle);
}
.table {
    color: var(--text-body);
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--surface-card);
}
.table thead th, .table td, .table th {
    border-color: var(--border-subtle) !important;
    color: var(--text-body);
}
.table-list > tbody > tr > td, .table-list thead th {
    background-color: var(--surface-page) !important;
    color: var(--text-body) !important;
}
table.dataTable.table-striped > tbody > tr.odd > * {
    box-shadow: none;
    background-color: var(--surface-card) !important;
}
.breadcrumb {
    background-color: transparent;
}
.dropdown-menu {
    background-color: var(--surface-card);
    border: 1px solid var(--border-subtle);
}
.dropdown-item {
    color: var(--text-body);
}
.dropdown-item:hover {
    background-color: var(--surface-page);
    color: var(--global--color-bright-orange);
}
.modal-content {
    background-color: var(--surface-card);
    color: var(--text-body);
}
.text-muted, small, .small {
    color: var(--text-muted) !important;
}
.card article, .announcement article {
    background-color: var(--surface-page) !important;
    color: var(--text-body);
}
.page-link, .paginate_button {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-subtle) !important;
}
.page-item.active .page-link, .paginate_button.current {
    background-color: var(--global--color-bright-orange) !important;
    color: #fff !important;
    border-color: var(--global--color-bright-orange) !important;
}
.page-item.disabled .page-link, .paginate_button.disabled {
    color: var(--global--color-dark-grayish-cyan) !important;
    background-color: var(--surface-card) !important;
}
.client-home-cards .card-header, .client-home-cards .tile, a.tile {
    background-color: var(--surface-card) !important;
    color: var(--text-heading) !important;
}
.client-home-cards .tile .title, .tiles a.tile {
    color: var(--text-body) !important;
}
.list-group-item-action:hover, .list-group-item-action:focus,
.list-group-item:hover, .list-group-item:focus,
a.tile:hover, a.tile:focus {
    background-color: rgba(255, 75, 1, 0.22) !important;
    color: var(--text-body) !important;
}
table.dataTable tbody tr:hover, table.dataTable tbody tr:hover > * {
    background-color: rgba(255, 75, 1, 0.22) !important;
    color: var(--text-body) !important;
    box-shadow: none !important;
}
.responsive-tabs-sm .nav-item a:hover,
/* fix 2026-07-28: icono de notificaciones sin color propio -> se pierde en el fondo oscuro; ahora en naranjo de marca */
#accountNotifications i.far.fa-flag { color: var(--global--color-bright-orange) !important; }
/* fix 2026-07-28: texto del popover de notificaciones sin regla base, hereda gris pensado para fondo claro -> invisible en oscuro */
.popover-user-notifications ul li a { color: var(--text-body) !important; }
.popover-user-notifications ul li a:hover,
.kb-category a:hover,
.kb-article-item:hover,
.table-list > tbody > tr:hover > td,
.select-account a:hover {
    background-color: rgba(255, 75, 1, 0.22) !important;
    color: var(--text-body) !important;
}
/* Titulo del articulo de KB -- sin regla base en el core (solo :hover y el
   <small> tenian color propio), garantizamos que se vea claro siempre. */
.kb-article-item {
    color: var(--text-heading) !important;
    font-weight: 600;
}
.kb-article-item small {
    color: var(--text-muted) !important;
}
/* ===================================================================
   Seccion A (alta prioridad) -- toggles bootstrap-switch, tiles del
   dashboard, editor Markdown (tickets/KB) y tabs responsive movil.
   Selectores confirmados 1:1 contra templates/twenty-one/css/theme.css
   (tema core del que hereda "cruechone"), 2026-07-18.
   =================================================================== */

/* Toggles on/off (2FA, opciones configurables de producto) -- estado
   "secondary" del core trae fondo blanco fijo */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
    background-color: var(--surface-card);
    color: var(--text-body);
    border-color: var(--border-subtle);
}

/* Tiles de accesos rapidos del dashboard ("Su cuenta", etc) */
.tiles .tile {
    background-color: var(--surface-card);
    border-right: 1px solid var(--border-subtle);
}
.tiles .tile:hover {
    background-color: var(--surface-page);
}

/* Editor Markdown (respuesta de tickets, articulos de base de
   conocimientos) -- toolbar, textarea y preview vienen con fondo
   blanco fijo en el core; sin el color de texto el usuario escribiria
   a ciegas (texto negro por defecto sobre fondo oscuro) */
.md-editor {
    border-color: var(--border-subtle);
}
.md-editor > .btn-toolbar {
    background-color: var(--surface-card) !important;
}
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
    background-color: var(--surface-page) !important;
    color: var(--text-body) !important;
}

/* Botones deshabilitados -- el core fuerza blanco en :hover/:focus/:active
   sobre un boton que ya deberia verse apagado, no brillante */
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
    background-color: var(--surface-card) !important;
    border-color: var(--border-subtle) !important;
}

/* Tabs responsive en movil (<768px) -- menu de servicio/factura que
   se convierte en pestañas apiladas; el core trae fondo blanco fijo */
@media (max-width: 767.98px) {
    .responsive-tabs-sm {
        background-color: var(--surface-card);
        border-color: var(--border-subtle);
    }
    .responsive-tabs-sm .nav-item a.active {
        background-color: var(--surface-card) !important;
    }
}

/* =====================================================================
   RONDA CONSOLIDADA DE CONTRASTE — 2026-07-18
   Basada en auditoria completa file-by-file (docs A: CSS / B: tpl
   twenty-one / C: tpl cruechone+cart). Cierra los HUECOS que los
   bloques previos de override86 NO cubrian. Todos los valores usan
   tokens theme-aware (--surface-*, --text-*, --border-subtle,
   --text-muted, --global--color-bright-orange) => funcionan igual en
   modo oscuro (default) y claro (html.theme-light).
   ===================================================================== */

/* --- 1. Banner "verifica tu correo" (theme.css:11020) — ALTA -------- */
.verification-banner{
    background-color:var(--surface-card)!important;
    color:var(--text-body)!important;
    border-bottom:1px solid var(--border-subtle)!important;
}
.verification-banner a{color:var(--global--color-bright-orange)!important;}
.verification-banner .btn.close,.verification-banner .close{
    color:var(--text-muted)!important;opacity:.9!important;text-shadow:none!important;
}

/* --- 2. .custom-select (select nativo estilizado, caja blanca) ------ */
.custom-select{
    background-color:var(--surface-page)!important;
    color:var(--text-body)!important;
    border:1px solid var(--border-subtle)!important;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23b4b0b9' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")!important;
    background-repeat:no-repeat!important;
    background-position:right .75rem center!important;
    background-size:8px 10px!important;
}
html.theme-light .custom-select{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23665f6d' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")!important;
}

/* --- 3. Pestañas .nav-tabs (la activa quedaba blanca) — ALTA -------- */
.nav-tabs{border-bottom:1px solid var(--border-subtle)!important;}
.nav-tabs .nav-link{color:var(--text-muted);}
.nav-tabs .nav-link:hover,.nav-tabs .nav-link:focus{
    border-color:var(--border-subtle) var(--border-subtle) var(--border-subtle);
    color:var(--text-body);
}
.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link{
    color:var(--text-heading)!important;
    background-color:var(--surface-card)!important;
    border-color:var(--border-subtle) var(--border-subtle) var(--surface-card)!important;
}

/* --- 4. Checkbox/radio marcado: azul BS -> naranja de marca -------- */
.custom-control-label::before{
    background-color:var(--surface-page)!important;
    border:1px solid var(--border-subtle)!important;
}
.custom-control-input:checked~.custom-control-label::before{
    background-color:var(--global--color-bright-orange)!important;
    border-color:var(--global--color-bright-orange)!important;
}
.custom-control-input:focus~.custom-control-label::before{
    box-shadow:0 0 0 .2rem rgba(255,75,1,.25)!important;
}

/* --- 5. .popover (notificaciones del topbar, ayudas) — ALTA -------- */
.popover{
    background-color:var(--surface-card)!important;
    border:1px solid var(--border-subtle)!important;
}
.popover .popover-body,.popover-body{color:var(--text-body)!important;}
.popover .popover-header,.popover-header{
    background-color:var(--surface-page)!important;
    color:var(--text-heading)!important;
    border-bottom:1px solid var(--border-subtle)!important;
}
.bs-popover-top>.arrow::after,.bs-popover-auto[x-placement^="top"]>.arrow::after{border-top-color:var(--surface-card)!important;}
.bs-popover-bottom>.arrow::after,.bs-popover-auto[x-placement^="bottom"]>.arrow::after{border-bottom-color:var(--surface-card)!important;}
.bs-popover-left>.arrow::after,.bs-popover-auto[x-placement^="left"]>.arrow::after{border-left-color:var(--surface-card)!important;}
.bs-popover-right>.arrow::after,.bs-popover-auto[x-placement^="right"]>.arrow::after{border-right-color:var(--surface-card)!important;}

/* --- 6. .btn-link azul -> naranja --------------------------------- */
.btn-link{color:var(--global--color-bright-orange)!important;}
.btn-link:hover,.btn-link:focus{color:var(--text-heading)!important;}

/* --- 7. Boton "×" (close) negro -> claro sobre superficie oscura --- */
.close{color:var(--text-heading)!important;text-shadow:none!important;opacity:.8;}
.close:hover,.close:focus{color:var(--text-heading)!important;opacity:1;}

/* --- 8. .custom-file-label (input de archivo, subir adjunto) ------- */
.custom-file-label{
    background-color:var(--surface-page)!important;
    color:var(--text-body)!important;
    border:1px solid var(--border-subtle)!important;
}
.custom-file-label::after{
    background-color:var(--surface-card)!important;
    color:var(--text-body)!important;
    border-left:1px solid var(--border-subtle)!important;
}

/* --- 9. .master-breadcrumb (franja gris clara del contenedor) ------ */
.master-breadcrumb{background-color:transparent!important;}

/* --- 10. .navbar-light: links del menu principal ------------------ */
.navbar-light .navbar-nav .nav-link{color:var(--text-body)!important;}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active{color:var(--global--color-bright-orange)!important;}
.navbar-light .navbar-brand{color:var(--text-heading)!important;}
.navbar-light .navbar-toggler{border-color:var(--border-subtle)!important;}

/* --- 11. BARRIDO GLOBAL de utilidades claras (cubre addons inactivos,
   heros, tabs de dominio en checkout, etc. "gratis") --------------- */
.bg-white{background-color:var(--surface-card)!important;}
.bg-light{background-color:var(--surface-card)!important;}
.text-dark{color:var(--text-body)!important;}
.text-black-50{color:var(--text-muted)!important;}
.text-muted{color:var(--text-muted)!important;}
.border{border-color:var(--border-subtle)!important;}
.border-top,.border-right,.border-bottom,.border-left{border-color:var(--border-subtle)!important;}

/* --- 12. Alerts: cajas claras -> superficie oscura tintada con el
   color semantico (mantiene significado, elimina el bloque blanco) - */
.alert{
    background-color:var(--surface-card);
    color:var(--text-body);
    border:1px solid var(--border-subtle);
}
.alert-success{background-color:rgba(40,167,69,.14)!important;border-color:rgba(40,167,69,.55)!important;color:var(--text-body)!important;}
.alert-danger,.alert-error{background-color:rgba(220,53,69,.14)!important;border-color:rgba(220,53,69,.6)!important;color:var(--text-body)!important;}
.alert-warning{background-color:rgba(255,193,7,.14)!important;border-color:rgba(255,193,7,.55)!important;color:var(--text-body)!important;}
.alert-info{background-color:rgba(23,162,184,.14)!important;border-color:rgba(23,162,184,.55)!important;color:var(--text-body)!important;}
.alert-primary{background-color:rgba(255,75,1,.14)!important;border-color:rgba(255,75,1,.55)!important;color:var(--text-body)!important;}
.alert-secondary{background-color:var(--surface-card)!important;border-color:var(--border-subtle)!important;color:var(--text-body)!important;}
.alert .alert-link{color:var(--global--color-bright-orange)!important;}
.alert .close{color:var(--text-heading)!important;}

/* --- 13. Riel de .progress (barra de fuerza de clave, etc.) -------- */
.progress{background-color:var(--surface-page)!important;}

/* --- 14. .nav-pills activa: azul -> naranja ----------------------- */
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{
    background-color:var(--global--color-bright-orange)!important;color:#fff!important;
}

/* --- 15. Badges/labels claros (BS4 badge-light/secondary + BS3
   label-default/grey). Los coloreados semanticos se dejan igual. --- */
.badge-light{background-color:var(--surface-card)!important;color:var(--text-body)!important;}
.badge-secondary{background-color:var(--surface-card)!important;color:var(--text-body)!important;border:1px solid var(--border-subtle)!important;}
a.badge-secondary:hover,a.badge-secondary:focus,a.badge-secondary.active{
    background-color:var(--global--color-bright-orange)!important;color:#fff!important;border-color:var(--global--color-bright-orange)!important;
}
.label-default{background-color:var(--surface-card)!important;color:var(--text-body)!important;border:1px solid var(--border-subtle)!important;}
.label-grey,.label-gray{background-color:var(--surface-card)!important;color:var(--text-muted)!important;}

/* --- 16. Bloques de codigo / tablas markdown en KB y tickets ------- */
pre{background-color:var(--surface-page)!important;color:var(--text-body)!important;border:1px solid var(--border-subtle);}
code{color:var(--global--color-bright-orange)!important;background-color:rgba(255,75,1,.08);}
.markdown-content table,.md-preview table{background-color:var(--surface-card)!important;border-color:var(--border-subtle)!important;}
.markdown-content table thead,.md-preview table thead,
.markdown-content th,.md-preview th{background-color:var(--surface-page)!important;color:var(--text-heading)!important;border-color:var(--border-subtle)!important;}
.markdown-content td,.md-preview td{border-color:var(--border-subtle)!important;color:var(--text-body)!important;}
.markdown-content blockquote,.md-preview blockquote{border-left-color:var(--border-subtle)!important;}

/* --- 17. Cajas claras de flujos multi-cuenta / invitaciones ------- */
.continue-container,.invite-box{background-color:var(--surface-card)!important;border-color:var(--border-subtle)!important;}
.select-account a{border-color:var(--border-subtle)!important;}

/* --- 18. Cajas blancas de plugins (DataTables responsive, captcha) - */
div.dtr-modal-display{background-color:var(--surface-card)!important;border-color:var(--border-subtle)!important;}
.dtr-modal-close{background-color:var(--surface-page)!important;border-color:var(--border-subtle)!important;color:var(--text-body)!important;}
table.dataTable tr.child li{border-color:var(--border-subtle)!important;}
.captcha-overlay-popup{background-color:var(--surface-card)!important;border-color:var(--border-subtle)!important;color:var(--text-body)!important;}

/* --- 19. CARRITO (cruech_cart) — huecos no cubiertos -------------- */
/* sub-heading: el span "corta" la linea horizontal; su fondo debe ser
   el del body, no blanco */
.sub-heading span,.header-lined span{background-color:var(--surface-page)!important;color:var(--text-heading)!important;}
/* paneles de addon seleccionables (configureproduct/configuredomains) */
.panel-addon,.panel-addon-selected{
    background-color:var(--surface-card)!important;border:1px solid var(--border-subtle)!important;color:var(--text-body)!important;
}
.panel-addon-selected{border-color:var(--global--color-bright-orange)!important;}
.panel-price,.panel-add{color:var(--text-body)!important;}
/* sugerencias de dominio (list-group) — refuerzo por si el generico no
   alcanza el scope del cart */
.domain-lookup-result.list-group .domain-suggestion.list-group-item,
.domain-suggestion.list-group-item{background-color:var(--surface-card)!important;color:var(--text-body)!important;border-color:var(--border-subtle)!important;}
/* sidebar de categorias del carrito */
.card-sidebar,.panel-sidebar{background-color:var(--surface-card)!important;border-color:var(--border-subtle)!important;}
.card-sidebar .list-group-item,.panel-sidebar .list-group-item{background-color:var(--surface-card)!important;color:var(--text-body)!important;border-color:var(--border-subtle)!important;}
.card-sidebar .list-group-item.active,.panel-sidebar .list-group-item.active{background-color:var(--global--color-bright-orange)!important;border-color:var(--global--color-bright-orange)!important;color:#fff!important;}

/* --- 20. store dinamico (WHMCS 8+): pares de fondo alternos.
   Las custom properties inline del wrapper ganan; por eso se pintan
   las clases hijas directamente con !important. --------------------- */
.dynamic-landing-page .background-light{background-color:var(--surface-card)!important;}
.dynamic-landing-page .background-main{background-color:var(--surface-page)!important;}
.dynamic-landing-page table.comparison-table,
.dynamic-landing-page table.comparison-table th,
.dynamic-landing-page table.comparison-table td{background-color:var(--surface-card)!important;color:var(--text-body)!important;border-color:var(--border-subtle)!important;}

/* --- 21. Boton generico ".btn" sin modificador (certificate-item) -- */
.item>.btn:not([class*="btn-"]){border:1px solid var(--border-subtle)!important;color:var(--text-body)!important;}

/* --- Cart: tabla de precios de dominio (filas blancas alternadas) 2026-07-19 --- */
.domain-pricing .bg-white,
.domain-pricing .row.no-gutters,
.domain-pricing .tld-pricing-header { background-color: var(--surface-page) !important; }
.domain-pricing .tld-row { background-color: var(--surface-page) !important; }
.domain-pricing .tld-row:nth-of-type(even) { background-color: var(--surface-card) !important; }
.domain-pricing .tld-row.highlighted,
.domain-pricing .tld-row.filtered-row.highlighted { background-color: var(--surface-card) !important; }
.domain-pricing .tld-row, .domain-pricing .tld-pricing-header,
.domain-pricing .tld-row .tld-column, .domain-pricing .tld-row strong,
.domain-pricing .tld-row span:not(.sales-group-hot):not(.sales-group-new):not(.sales-group-sale) { color: var(--text-body) !important; }
.domain-promo-box { background-color: var(--surface-card) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-body) !important; }

/* --- Cart: celdas de la tabla de precios (heredan el fondo de la fila) --- */
.domain-pricing .tld-column,
.domain-pricing .tld-row > [class*="col-"],
.domain-pricing .tld-row [class*="col-"],
.domain-pricing .row.no-gutters > [class*="col-"] { background-color: transparent !important; }

/* --- Footer de marca + barra inferior a oscuro 2026-07-19 --- */
.footer-section { background-color: var(--surface-page) !important; }
.footer-section .middle-portion { background-color: transparent !important; }
.footer-section .middle-portion h3, .footer-section .middle-portion h4,
.footer-section .middle-portion .heading, .footer-section .middle-portion p,
.footer-section .middle-portion a, .footer-section .middle-portion li,
.footer-section .middle-portion .text, .footer-section .middle-portion .text-size-14 { color: var(--text-body) !important; }
.footer-section .middle-portion a:hover { color: var(--global--color-bright-orange) !important; }
.footer-section .social-icons li.circle,
.footer-section .social-icons li.circle a { background-color: var(--surface-card) !important; color: var(--text-body) !important; }
#footer.footer { background-color: var(--surface-header) !important; }
#footer.footer .copyright, #footer.footer a, #footer.footer .nav-link { color: var(--text-muted) !important; }
#footer.footer a:hover { color: var(--global--color-bright-orange) !important; }

/* --- Cards TLD destacados (.com/.net VeriSign) a oscuro --- */
.featured-tld { background-color: var(--surface-card) !important; border: 1px solid var(--border-subtle) !important; }
.featured-tld .featured-tld-name, .featured-tld strong, .featured-tld span { color: var(--text-body) !important; }

/* --- Logos de cards TLD destacados: a blanco para verse sobre oscuro --- */
.featured-tld img { filter: brightness(0) invert(1); }

/* --- Footer SIEMPRE oscuro (marca, como cruechone.com) — fix light-mode blanco/blanco 2026-07-19 --- */
.footer-section, #footer.footer { background-color: #0a0910 !important; }
.footer-section .middle-portion { background-color: transparent !important; }
.footer-section .middle-portion h3, .footer-section .middle-portion h4,
.footer-section .middle-portion .heading, .footer-section .middle-portion p,
.footer-section .middle-portion a, .footer-section .middle-portion li,
.footer-section .middle-portion .text, .footer-section .middle-portion .text-size-14,
.footer-section .logo-content p { color: #ffffff !important; }
.footer-section .middle-portion a:hover, #footer.footer a:hover { color: #ff4b01 !important; }
.footer-section .social-icons li.circle, .footer-section .social-icons li.circle a { background-color: #131116 !important; color: #ffffff !important; }
#footer.footer .copyright, #footer.footer a, #footer.footer .nav-link { color: #b4b0b9 !important; }

/* --- Menú móvil (navbar colapsado): panel oscuro + items legibles 2026-07-19 --- */
@media (max-width: 991.98px) {
  #mainNavbar, .navbar-collapse, #header .main-navbar-wrapper { background-color: var(--surface-card) !important; }
  #mainNavbar .dropdown-menu, .navbar-collapse .dropdown-menu, .navbar-nav .dropdown-menu {
    background-color: var(--surface-page) !important; border-color: var(--border-subtle) !important; }
  #mainNavbar .nav-link, #mainNavbar .dropdown-item, #mainNavbar .dropdown-item span,
  .navbar-collapse .nav-link, .navbar-collapse .dropdown-item, .navbar-collapse .dropdown-item span {
    color: var(--text-body) !important; }
  .navbar-collapse .dropdown-item:hover, .navbar-collapse .dropdown-item:focus, .navbar-collapse .nav-link:hover,
  #mainNavbar .dropdown-item:hover, #mainNavbar .dropdown-item:focus {
    background-color: rgba(255,75,1,0.22) !important; color: var(--text-body) !important; }
}

/* --- Tienda: fichas de producto (.product) blancas en oscuro 2026-07-19 --- */
.products .product, .product.clearfix { background-color: var(--surface-card) !important; border: 1px solid var(--border-subtle) !important; }
.products .product > header, .product.clearfix > header, .product header { background-color: var(--surface-page) !important; color: var(--text-heading) !important; border-color: var(--border-subtle) !important; }
.products .product .get_started, .product.clearfix .get_started, a.get_started.btn { background-color: var(--global--color-bright-orange) !important; color: #fff !important; border-color: var(--global--color-bright-orange) !important; }
.products .product, .product.clearfix, .product .product-desc, .product .feature-value, .product li, .product p { color: var(--text-body) !important; }

/* --- Opciones de dominio/config (.option) claras en oscuro 2026-07-19 --- */
div.option, li.option, label.option, .domain-selection-options .option {
  background-color: var(--surface-card) !important; border-color: var(--border-subtle) !important; color: var(--text-body) !important; }

/* --- Navbar links: legibles en claro (eran blanco/blanco) 2026-07-19 --- */
#header .navbar-nav .nav-link, #header .main-navbar-wrapper .nav-link,
#header .navbar .nav-link, #header .navbar-nav > li > a, .navbar-light .navbar-nav > li > a {
  color: var(--text-body) !important; }
#header .navbar-nav .nav-link:hover, #header .navbar .nav-link:hover,
#header .navbar-nav .active > .nav-link { color: var(--global--color-bright-orange) !important; }

/* --- Badge de estado .label-placeholder ("Suspendido" etc.) legible 2026-07-19 --- */
.label-placeholder, .label.label-placeholder, .status.label-placeholder {
  background-color: var(--surface-card) !important; color: var(--text-body) !important; border: 1px solid var(--border-subtle) !important; }

/* --- Header SIEMPRE oscuro: logo blanco + nav links blancos en AMBOS modos (el hero es fijo oscuro) 2026-07-19 --- */
html.theme-light #header .logo-dark-mode { display: inline-block !important; }
html.theme-light #header .logo-light-mode { display: none !important; }
#header .navbar-nav .nav-link, #header .main-navbar-wrapper .nav-link,
#header .navbar .nav-link, #header .navbar-nav > li > a, .navbar-light .navbar-nav > li > a,
#header .navbar-nav .dropdown-toggle { color: #ffffff !important; }
#header .navbar-nav .nav-link:hover, #header .navbar .nav-link:hover,
#header .navbar-nav .active > .nav-link, #header .navbar-nav .show > .nav-link { color: #ff4b01 !important; }

/* --- Widgets de formulario claros/bajo contraste 2026-07-19 --- */
.custom-file-label, .custom-file-label.text-truncate { background-color: var(--surface-page) !important; color: var(--text-body) !important; }
select.custom-select, .form-control.custom-select, .custom-select { background-color: var(--surface-page) !important; color: var(--text-body) !important; }
.selected-dial-code, .iti__selected-dial-code, .intl-tel-input .selected-dial-code, .iti .selected-dial-code { color: var(--text-body) !important; }
.iti__country-list, .country-list, .intl-tel-input .country-list { background-color: var(--surface-card) !important; color: var(--text-body) !important; border-color: var(--border-subtle) !important; }
.iti__country.iti__highlight, .country-list .country.highlight { background-color: rgba(255,75,1,0.22) !important; }
.iti__dial-code, .country-list .dial-code { color: var(--text-muted) !important; }

/* --- Menú móvil en modo CLARO: panel oscuro fijo (links son blancos siempre) 2026-07-19 --- */
@media (max-width: 991.98px) {
  html.theme-light #mainNavbar,
  html.theme-light .navbar-collapse,
  html.theme-light .navbar-collapse.collapse,
  html.theme-light .navbar-collapse.show,
  html.theme-light #header .main-navbar-wrapper { background-color: #131116 !important; }
  html.theme-light .navbar-collapse .dropdown-menu { background-color: #0a0910 !important; }
  html.theme-light .navbar-collapse .dropdown-item { color: #ffffff !important; }
  html.theme-light .navbar-collapse .dropdown-item:hover { color: #ff4b01 !important; }
}

/* ===== BARRIDO PROFUNDO 2026-07-19 (Opus visual + Sonnet CSS + Fable tpl) ===== */

/* A. .card-title/.panel-title de paneles eran color fijo oscuro -> invisibles en modo oscuro. Theme-aware. */
.card-title, .panel-title { color: var(--text-heading) !important; }

/* #1 dropdown idioma/moneda en topbar: texto dark-gray fijo sobre panel oscuro -> invisible en oscuro */
.top-bar-section .top-bar ul .dropdown-item a,
.top-bar-section .dropdown-item,
.top-bar-section .dropdown-item a { color: var(--text-body) !important; }

/* #5 CAUSA RAIZ: header y topbar deben ser OSCUROS FIJOS en ambos modos (como el footer), no --surface-header */
#header.header, .top-bar-section { background-color: #0a0910 !important; }

/* #2 menu colapsado en 992-1199px (tablet landscape/iPad): fondo era blanco fijo con links blancos -> invisible.
   Extender el tratamiento "menu oscuro fijo" hasta 1199.98px en AMBOS modos. */
@media (max-width: 1199.98px) {
  #header.header .main-navbar-wrapper,
  .main-navbar-wrapper,
  #mainNavbar,
  .navbar-collapse,
  .navbar-collapse.collapse,
  .navbar-collapse.show { background-color: #131116 !important; }
  .navbar-collapse .dropdown-menu { background-color: #0a0910 !important; }
  .navbar-collapse .nav-link,
  .navbar-collapse .dropdown-item,
  .navbar-collapse .dropdown-item span { color: #ffffff !important; }
  .navbar-collapse .dropdown-item:hover,
  .navbar-collapse .nav-link:hover { color: #ff4b01 !important; }
}

/* #3 submenu movil en modo claro: el <span> quedaba en --text-body (oscuro) sobre fondo oscuro */
@media (max-width: 1199.98px) {
  html.theme-light .navbar-collapse .dropdown-item,
  html.theme-light .navbar-collapse .dropdown-item span,
  html.theme-light #mainNavbar .dropdown-item span { color: #ffffff !important; }
}

/* #2b submenu movil: la regla #mainNavbar .dropdown-menu (ID, var--surface-page) ganaba y lo ponia
   blanco en claro. Forzar oscuro fijo CON misma especificidad de ID, y texto blanco junto. */
@media (max-width: 1199.98px) {
  #mainNavbar .dropdown-menu,
  #mainNavbar .dropdown-menu.show { background-color: #0a0910 !important; }
  #mainNavbar .dropdown-item,
  #mainNavbar .dropdown-item span,
  #mainNavbar .dropdown-item a { color: #ffffff !important; }
  #mainNavbar .dropdown-item:hover,
  #mainNavbar .dropdown-item:hover span,
  #mainNavbar .dropdown-item:hover a { color: #ff4b01 !important; }
}

/* --- Fila de TLDs en la home: texto (no imagen) + alineado + geo-ordenado 2026-07-19 --- */
.home-domain-search .tld-logos { display: flex; align-items: flex-start; flex-wrap: nowrap; }
.home-domain-search .tld-logos li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
.home-domain-search .tld-logos .tld-name { display: block; color: var(--global--color-bright-orange) !important; font-weight: 700; line-height: 1.1; margin-bottom: 6px; white-space: nowrap; }
.home-domain-search .tld-logos .tld-price { display: block; color: #ffffff !important; font-weight: 700; line-height: 1.1; white-space: nowrap; }

/* ===== Footer estilo cruechone.com (rediseño 2026-07-19) ===== */
.footer-section .cxf-main { display: flex; flex-wrap: wrap; gap: 40px 48px; padding: 64px 0 48px; }
.footer-section .cxf-brand { flex: 1 1 260px; max-width: 320px; }
.footer-section .cxf-brand .cxf-logo { width: 150px; height: auto; margin-bottom: 20px; }
.footer-section .cxf-tagline { color: #b4b0b9 !important; font-size: 14px; line-height: 1.6; margin-bottom: 22px; max-width: 260px; }
.footer-section .cxf-social { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.footer-section .cxf-social li { padding: 0; margin: 0; }
.footer-section .cxf-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #34303a; color: #ffffff !important; font-size: 16px; transition: border-color .2s, color .2s; }
.footer-section .cxf-social a:hover { border-color: #ff4b01; color: #ff4b01 !important; }
.footer-section .cxf-col { flex: 1 1 150px; min-width: 140px; }
.footer-section .cxf-head { text-transform: uppercase; letter-spacing: .07em; font-size: 13px; font-weight: 700; color: #ffffff !important; margin: 0 0 18px; }
.footer-section .cxf-col ul { list-style: none; padding: 0; margin: 0; }
.footer-section .cxf-col li { margin-bottom: 12px; }
.footer-section .cxf-col a, .footer-section .cxf-col span { color: #b4b0b9 !important; font-size: 14.5px; line-height: 1.4; text-decoration: none; transition: color .2s; }
.footer-section .cxf-col a:hover { color: #ff4b01 !important; }

/* barra inferior: copyright + links legales (estilo cruechone.com) */
#footer.footer .cxf-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 22px 0; border-top: 1px solid #201d24; }
#footer.footer .cxf-bottom .copyright { color: #8a8790 !important; font-size: 13px; margin: 0; }
#footer.footer .cxf-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; padding: 0; margin: 0; }
#footer.footer .cxf-legal li { padding: 0; margin: 0; }
#footer.footer .cxf-legal a { color: #8a8790 !important; font-size: 13px; text-decoration: none; transition: color .2s; }
#footer.footer .cxf-legal a:hover { color: #ff4b01 !important; }

@media (max-width: 767.98px) {
  .footer-section .cxf-main { gap: 30px 24px; padding: 40px 0 28px; }
  .footer-section .cxf-brand { flex: 1 1 100%; max-width: 100%; }
  .footer-section .cxf-col { flex: 1 1 40%; min-width: 120px; }
  #footer.footer .cxf-bottom { justify-content: flex-start; }
}
/* que el botón de chat no tape el último link legal en escritorio */
@media (min-width: 768px) { #footer.footer .cxf-bottom { padding-right: 84px; } }

/* ===== Fix zona copyright/legal del footer — recomendación UX+UI (móvil) 2026-07-19 ===== */
#footer.footer .cxf-legal { gap: 10px 22px; }
#footer.footer .cxf-legal a { white-space: nowrap; line-height: 1.6; }
#footer.footer .cxf-legal a:hover, #footer.footer .cxf-legal a:focus-visible { text-decoration: underline; }
@media (max-width: 767.98px) {
  #footer.footer .cxf-bottom { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; padding: 22px 20px; }
  #footer.footer .cxf-bottom .copyright { width: 100%; line-height: 1.6; }
  #footer.footer .cxf-legal { justify-content: center; width: 100%; row-gap: 6px; column-gap: 18px; }
  #footer.footer .cxf-legal a { padding: 5px 2px; }
}
/* que el botón de chat no tape la última fila legal en móvil */
@media (max-width: 767.98px) { #footer.footer .cxf-bottom { padding-bottom: 84px; } }
/* Punto 2 UX/UI: footer a 1 columna en móvil (como cruechone.com) */
@media (max-width: 767.98px) {
  .footer-section .cxf-col { flex: 1 1 100%; min-width: 0; }
}

/* ===================================================================
   Causa B (2026-08-28) -- el reskin pinta "color" con !important en el
   ANCESTRO, pero el stock declara "color" (sin !important) en el HIJO.
   La herencia es lo mas debil de la cascada: un !important en el
   ancestro NUNCA vence una declaracion directa en el hijo. Regla: hay
   que apuntar al MISMO elemento que apunta el stock, no a su padre.
   Este bug ya fue reintroducido 3 veces segun la memoria del holding;
   estos 3 casos apuntan directo al selector del stock (all.css) para
   que no vuelva a pasar.
   =================================================================== */

/* 1. Titulos de plan (cart.php, listado de productos): override86.css
   ya pone color !important en #order-standard_cart .products .product
   header, pero all.css:207 pone color:#333 directo en el <span> hijo
   -- el span gana. */
#order-standard_cart .products .product header span {
    color: var(--text-heading) !important;
}

/* 2. Cantidad del plan (ej. "x1"): mismo patron, all.css:213 pone
   color:#888 directo en .qty (hijo de header), sin cobertura previa. */
#order-standard_cart .products .product header .qty {
    color: var(--text-muted) !important;
}

/* 3. Nombre de complementos (cart.php?gid=addons): override86.css ya
   pone color !important en .panel-addon (seccion 19), pero
   all.css:270 pone color:#333 directo en .panel-body label -- el
   label gana. Sin este fix solo se ve el icono del addon. */
#order-standard_cart .panel-addon .panel-body label {
    color: var(--text-body) !important;
}

/* ===================================================================
   Causa E (2026-08-28) -- foco de teclado invisible en ".btn"
   (outline:none sin sustituto, incluye "Pagar" y "Completar pedido").
   Se agrega SOLO para .btn:focus-visible (no es un reset global de
   *:focus). Los radios de metodo de pago usan el foco nativo del
   navegador y no se tocan aqui.
   =================================================================== */
.btn:focus-visible {
    outline: 2px solid var(--text-heading) !important;
    outline-offset: 2px !important;
}

/* ===================================================================
   Causa C (2026-08-28) -- 13 pantallas de venta (store/ssl/*, sitelock,
   sitelockvpn, codeguard, marketgoo, weebly, sitebuilder, wp-toolkit,
   spamexperts, threesixtymonitoring, nordvpn, addon/wp-toolkit-*) sin
   NINGUNA cobertura de tema. override86.css tenia cero reglas para
   ".landing-page" (las 5 coincidencias previas eran de
   ".dynamic-landing-page", un namespace HERMANO pero DISTINTO, con su
   propio vocabulario de clases -- no comparten .background-light,
   .background-main ni table.comparison-table).

   Se audito linea por linea templates/twenty-one/css/store.css (3804
   lineas, stock, NO editado) para distinguir dos familias de bug:

   (a) Texto oscuro de fabrica (#333/#444/#666 etc.) declarado en un
       contenedor SIN fondo propio: al heredar el fondo oscuro global
       (override86.css: body{background-color:var(--surface-page)}),
       ese texto queda oscuro sobre oscuro.
   (b) Fondo claro de fabrica (#fff/#eee/#f6f6f6 etc.) declarado en un
       contenedor SIN color de texto propio: el texto hereda blanco
       del body oscuro y queda blanco sobre blanco.

   Las secciones con AMBOS (fondo Y color propios, ej. ".light-grey-bg"
   o ".get-started") ya eran legibles antes de este cambio -- se
   dejaron intactas para no rediseñar mas de lo necesario.
   Los colores de marca de cada producto de terceros (SiteLock #10069F,
   NordVPN, WP Toolkit morado #8952cb, etc., ya pareados con su propio
   texto blanco) tampoco se tocan: son intencionales, no un bug de
   contraste.
   =================================================================== */

/* -------------------------------------------------------------------
   C.1 -- Paginas "siempre claras" (whitelabel de terceros, diseñadas
   sobre fondo blanco fijo, no reactivas al tema oscuro/claro del
   sitio). sitebuilder y wp-toolkit ya declaraban background:#fff pero
   sin color propio -> el body oscuro les metia texto blanco encima.
   threesixtymonitoring era el caso inverso: color propio (#42535e)
   pero SIN fondo -> texto oscuro sobre el body oscuro. Se usa un color
   fijo (no var(--text-body), que es reactivo al tema) porque estas
   paginas NUNCA deben pasar a oscuro -- mismo patron que el footer
   "SIEMPRE oscuro" de mas arriba en este archivo, aqui invertido.
   ------------------------------------------------------------------- */
.landing-page.sitebuilder,
.wp-toolkit {
    color: #201d24 !important;
}
.landing-page.threesixtymonitoring {
    background-color: #ffffff !important;
}

/* -------------------------------------------------------------------
   C.2 -- Clases genericas de ".landing-page", compartidas por TODAS
   las paginas de venta que no traen su propio fondo de pagina
   (mail-services, ssl, sitelock, sitelockvpn, codeguard, marketgoo,
   ox, xovinow). Es la base que "prende" el tema oscuro en el resto.
   ------------------------------------------------------------------- */
.landing-page .hero {
    color: var(--text-body) !important;
}
.landing-page .product-options .item {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page .product-options p {
    color: var(--text-body) !important;
}
.landing-page .product-options .price {
    color: var(--text-body) !important;
}
.landing-page .nav-tabs > li > a,
.landing-page .nav-tabs > li > a:focus {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page .nav-tabs > li > a:hover {
    background-color: var(--surface-page) !important;
}
.landing-page .nav-tabs > li.active > a,
.landing-page .nav-tabs > li.active > a:focus,
.landing-page .nav-tabs > li.active > a:hover {
    background-color: var(--surface-page) !important;
    color: var(--text-body) !important;
}
.landing-page .tab-content {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page .pricing-item .feature-heading {
    background-color: var(--surface-page) !important;
    color: var(--text-body) !important;
}
.landing-page.weebly .weebly-lite-plan {
    background-color: var(--surface-card) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-body) !important;
}
.landing-page .features {
    background-color: var(--surface-page) !important;
    color: var(--text-body) !important;
}
.landing-page.weebly .faq {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}

/* -------------------------------------------------------------------
   C.3 -- SSL (store/ssl/*, la pagina citada primero en el causa list)
   ------------------------------------------------------------------- */
.landing-page.ssl .ssl-benefits .row {
    color: var(--text-body) !important;
}
.landing-page.ssl .browser-notice .wrapper {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page.ssl .detailed-info {
    background-color: var(--surface-page) !important;
}
.landing-page.ssl .detailed-info .card-body {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page.ssl .standout-2 {
    color: var(--text-body) !important;
}
.landing-page.ssl ul.ssl-certs-all li.featured {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}

/* -------------------------------------------------------------------
   C.4 -- SiteLock
   ------------------------------------------------------------------- */
.landing-page.sitelock .plans .plan {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page.sitelock .plans .plan ul li span {
    color: var(--text-heading) !important;
}

/* -------------------------------------------------------------------
   C.5 -- CodeGuard
   ------------------------------------------------------------------- */
.landing-page.codeguard .faqs {
    background-color: var(--surface-page) !important;
    color: var(--text-body) !important;
}
.landing-page.codeguard .overview-features span {
    color: var(--text-muted) !important;
}

/* -------------------------------------------------------------------
   C.6 -- SiteLock VPN
   ------------------------------------------------------------------- */
.landing-page.sitelockvpn .feature.alternate-bg {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page.sitelockvpn .feature.pricing .pricing-box {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page.sitelockvpn .feature.countries {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}

/* -------------------------------------------------------------------
   C.7 -- marketgoo
   ------------------------------------------------------------------- */
.landing-page.marketgoo .feature-wrapper {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page.marketgoo .plan.marketgoo_pro ul {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page.marketgoo .faqs {
    background-color: var(--surface-page) !important;
    color: var(--text-body) !important;
}

/* -------------------------------------------------------------------
   C.8 -- ox (addon de correo)
   ------------------------------------------------------------------- */
.landing-page.ox .pricing table {
    color: var(--text-body) !important;
}
.landing-page.ox .pricing table tr:nth-child(even) td:first-child {
    background-color: var(--surface-card) !important;
}
.landing-page.ox .faqs {
    background-color: var(--surface-page) !important;
    color: var(--text-body) !important;
}

/* -------------------------------------------------------------------
   C.9 -- xovinow
   ------------------------------------------------------------------- */
.landing-page.xovinow .pricing .plan-feature.row-highlight {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}
.landing-page.xovinow .pricing .money-back,
.landing-page.xovinow .pricing .plan-features,
.landing-page.xovinow .pricing .plan .plan-name,
.landing-page.xovinow .pricing .plan .plan-price {
    color: var(--text-body) !important;
}

/* ===================================================================
   Causa A -- cruech_cart (movido desde orderforms/cruech_cart/css/
   custom.css el 2026-08-28). Motivo del traslado: ese archivo se sirve
   con Cache-Control max-age=604800 y sin cache-bust por contenido, asi
   que un navegador que ya lo guardo no vuelve a pedirlo hasta que
   expire -- los clientes que ya vieron el carrito con el bug quedan
   atrapados con el CSS viejo aunque el servidor tenga el arreglo. Este
   archivo (override86.css) ya se carga en cart.php?a=view antes que
   cruech_cart/css/all.min.css y ya tiene cache-bust real por mtime
   (ver includes/hooks/override86_cache_bust.php), asi que moverlas
   aca invalida la cache de todos los clientes de inmediato.
   Fondos claros de fabrica sin cubrir en el carrito (fork de
   standard_cart). El reskin oscuro nunca los toco y el texto hereda
   blanco de la regla base de custom.css -> blanco sobre blanco.
   Bloqueante: cart.php?a=view (fila de producto + "Resumen Del
   Pedido") daba ratio 1.00:1. Cada selector replica EXACTO el de
   all.css (stock) para ganar la cascada sin editar el archivo stock.
   Todas las reglas quedan scopeadas a #order-standard_cart (el id
   fijo del wrapper en viewcart.tpl/checkout.tpl/domain-renewals.tpl/
   service-renewals.tpl/domainregister.tpl/complete.tpl del fork
   cruech_cart) para no pintar nada fuera del carrito, ya que este
   archivo se carga en todo el panel de cliente.
   =================================================================== */

/* 1. Info de producto + 2. resumen del pedido (cart.php?a=view) */
#order-standard_cart .product-info {
    background-color: var(--surface-card) !important;
    border-top-color: var(--border-subtle) !important;
    border-bottom-color: var(--border-subtle) !important;
}
#order-standard_cart .summary-container {
    background-color: var(--surface-card) !important;
}

/* 3. Precio del addon (el color ya esta cubierto arriba en este mismo
   archivo, faltaba el fondo) */
#order-standard_cart .panel-addon .panel-price {
    background-color: var(--surface-card) !important;
}

/* 4. Opcion de dominio seleccionada -- token de clase distinto de
   ".option" (que el reskin si cubre), quedaba fuera */
#order-standard_cart .domain-selection-options .option-selected {
    background-color: var(--surface-card) !important;
    border-left: 3px solid var(--global--color-bright-orange);
}

/* 5. Aviso "dominio no elegible para transferencia" */
#order-standard_cart .transfer-not-eligible {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}

/* 6-9. Spotlight de TLDs sugeridos (home / buscador) */
#order-standard_cart .spotlight-tlds {
    background-color: var(--surface-card) !important;
}
#order-standard_cart .spotlight-tld {
    background-color: var(--surface-page) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-body) !important;
}
#order-standard_cart .spotlight-tld .unavailable,
#order-standard_cart .spotlight-tld .invalid {
    background-color: var(--surface-card) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-muted) !important;
}
#order-standard_cart .suggested-domains .domain-lookup-suggestions-loader {
    background-color: var(--surface-card) !important;
}

/* 10-11. Renovaciones de dominio/servicio/addon */
#order-standard_cart .domain-renewals,
#order-standard_cart .service-renewals,
#order-standard_cart .addon-renewals .service-renewal {
    background-color: var(--surface-card) !important;
}
#order-standard_cart .domain-renewals .domain-renewal:nth-child(even),
#order-standard_cart .service-renewals .service-renewal:nth-child(even),
#order-standard_cart .addon-renewals .service-renewal:nth-child(even) {
    background-color: var(--surface-page) !important;
}
#order-standard_cart .service-renewals .div-renewal-ineligible {
    color: var(--text-body) !important;
}

/* 12. Filas del carrito (cart.php?a=view) -- el azul oscuro de fabrica
   (#056) para el nombre de dominio quedaria casi negro sobre negro una
   vez que la fila pasa a fondo oscuro; se corrige junto con el fondo */
#order-standard_cart .view-cart-items .item {
    background-color: var(--surface-card) !important;
}
#order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: var(--surface-page) !important;
}
#order-standard_cart .view-cart-items .item-domain {
    color: var(--text-body) !important;
}

/* 13. Boton "quitar del carrito" (el gris #444 de fabrica quedaria casi
   invisible en oscuro; el hover rojo se deja intacto) */
#order-standard_cart .btn-remove-from-cart {
    color: var(--text-muted) !important;
}

/* 14. Formulario de tarjeta + grilla de tarjetas guardadas */
#order-standard_cart .cc-input-container {
    background-color: var(--surface-card) !important;
    border-color: var(--border-subtle) !important;
}
#order-standard_cart .cc-input-container .existing-cc-grid {
    color: var(--text-body) !important;
}

/* 15. Aplicar credito a favor */
#order-standard_cart .apply-credit-container {
    background-color: var(--surface-card) !important;
}

/* 16. Tabs del carrito (promocion / metodo de pago) */
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    background-color: var(--surface-card) !important;
    border-color: var(--border-subtle) var(--border-subtle) var(--surface-card) !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--surface-card) !important;
}

/* 17. Promos de marketconnect en el carrito (weebly, sitelock, etc.) */
#order-standard_cart .mc-promo {
    background-color: var(--surface-page) !important;
    border-color: var(--border-subtle) !important;
}
#order-standard_cart .mc-promo .body {
    background-color: var(--surface-card) !important;
    border-top-color: var(--border-subtle) !important;
}

/* 18. Recomendaciones de producto (checkout) */
#order-standard_cart .product-recommendations .product-recommendation {
    background-color: var(--surface-page) !important;
    border-color: var(--border-subtle) !important;
}
#order-standard_cart .product-recommendations .product-recommendation .body {
    background-color: var(--surface-card) !important;
    border-top-color: var(--border-subtle) !important;
}

/* 19. Selector de cuenta (checkout con multiples cuentas) */
#order-standard_cart .account-select-container div.account {
    background-color: var(--surface-card) !important;
    border-color: var(--border-subtle) !important;
}
#order-standard_cart .account-select-container div.account.active {
    background-color: var(--surface-page) !important;
}

/* Caja de instrucciones de pago (PayPal PPCPv, cart.php?a=checkout) --
   modules/gateways/paypal_ppcpv/css/payment.css no le da fondo propio,
   asi que queda transparente sobre el body claro de fabrica del
   formulario de pago mientras el texto hereda blanco. Sin clase en
   ningun otro .tpl del panel fuera de checkout.tpl (verificado por
   grep), pero se scopea igual por consistencia con el resto de este
   bloque. */
#order-standard_cart .payment-instructions {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 4px;
    padding: 12px 15px;
}

/* ===================================================================
   20-23. Huecos del reskin oscuro detectados el 2026-09-10
   (cart.php?a=view con promo aplicada, y service-renewals).
   Reproducidos en harness local con el CSS real de produccion antes
   de escribir el fix, y revisados de forma adversarial despues.
   Igual que el bloque anterior, todo va con !important porque
   orderforms/cruech_cart/css/all.min.css se carga DENTRO del body
   (common.tpl del orderform) y por lo tanto DESPUES de este archivo:
   en empate de especificidad gana el de fabrica.
   =================================================================== */

/* 20. Caja del codigo promocional ya aplicado (cart.php?a=view, tab
   "Aplicar codigo promocional" cuando $promotioncode existe).
   De fabrica: ".view-cart-promotion-code{background-color:#fff}" y el
   texto hereda blanco del tema -> ratio 1.00:1: el codigo y su
   descripcion quedan invisibles dentro de un bloque blanco. El
   selector replica EXACTO el de all.min.css y gana por !important. */
#order-standard_cart .view-cart-promotion-code {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
    border: 1px dashed var(--border-subtle) !important;
}

/* 21. Filtro de busqueda de renovaciones (service-renewals y
   domain-renewals).
   De fabrica: ".form-control.domain-renewals-filter,.form-control
   .service-renewals-filter{background:url(search.png) #fff ...
   !important}" -- shorthand con !important y especificidad 0-2-0, que
   le gana al generico ".form-control" de este archivo (0-1-0). Doble
   consecuencia: caja blanca en tema oscuro y, peor, el texto que
   escribe el usuario hereda color blanco -> invisible mientras tipea.
   Se sube la especificidad a 1-2-0 con el id del wrapper del carrito y
   se reemplaza el PNG de fabrica (lupa gris oscura 27x22 pensada para
   fondo blanco) por un SVG inline en gris medio, medido en 5.51:1
   sobre el tema oscuro y 3.60:1 sobre el claro (minimo 3:1 para
   componente no textual, WCAG 1.4.11).
   background-position 19px: el padding-left de fabrica es 45px y el
   icono mide 16px, asi que 19px deja los mismos 10px de aire que el
   PNG original (que iba en 8px midiendo 27px de ancho). El eje
   vertical usa "center" en vez del "5px" fijo de fabrica para que no
   se descuadre si cambia el font-size. */
#order-standard_cart .form-control.domain-renewals-filter,
#order-standard_cart .form-control.service-renewals-filter {
    background-color: var(--surface-page) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8590' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.4 10.4 14 14' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 19px center !important;
    background-size: 16px 16px !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* 22. Span del boton "mostrar/ocultar elementos no renovables"
   (service-renewals) con el fondo de la pagina encima del boton.
   La regla 19 de este mismo archivo (".sub-heading span,.header-lined
   span") pinta CUALQUIER span dentro de .header-lined con
   --surface-page, para que el titulo "corte" la linea horizontal. En
   service-renewals.tpl ese boton vive dentro de .header-lined y sus
   dos spans (.to-hide/.to-show) caen en la regla: recuadro oscuro con
   el texto, recortado dentro del boton naranja.

   Alcance acotado tras la revision adversarial: se verifico el markup
   de las 14 plantillas de cruech_cart (y su copia en standard_cart).
   ".header-lined" solo contiene un boton en service-renewals.tpl; en
   las otras 13 cierra despues de un <h1>. ".sub-heading" aparece 20+
   veces y SIEMPRE cierra tras un <span> de titulo, nunca envuelve un
   <a> ni un <button>. Por eso las variantes con .sub-heading y con
   "a span" se sacaron: eran codigo muerto que, ademas, habria pisado
   el color de cualquier icono o badge que alguien metiera a futuro
   dentro de un enlace en esos 20+ bloques de checkout.

   El "color: inherit" es necesario, no cosmetico: sin el, en modo
   CLARO la regla 19 le impone --text-heading (#201d24) al span y el
   boton queda con texto oscuro sobre naranja, distinto de todos los
   demas botones del panel. Con inherit hereda el blanco del boton en
   los dos temas. Medido en harness: con inherit 3.36:1 en ambos;
   sin inherit 3.36:1 en oscuro y 4.96:1 en claro.
   NOTA: ese 3.36:1 es el problema del par blanco/#ff4b01 que afecta a
   TODOS los botones del panel, no algo propio de esta regla; se
   corrige de raiz con el token de accion, no aca. */
.header-lined .btn span,
.header-lined button span {
    background-color: transparent !important;
    color: inherit !important;
}

/* 23. Contenedor de los botones de pago express (PayPal Express,
   Stripe, etc.) en cart.php?a=view.
   all.css:805 le da "background-color:#e8e8e8" SIN !important y el
   texto hereda blanco del tema: mismo patron exacto que la regla 20.
   Hoy solo se renderiza si hay algun gateway de checkout directo
   habilitado ({foreach $gatewaysoutput} en viewcart.tpl:454), asi que
   puede no estar visible en este momento; se cubre igual porque el
   costo es nulo y el dia que se active un gateway el bug aparece en la
   pantalla de pago sin que nadie lo relacione con esto. */
#order-standard_cart .view-cart-gateway-checkout {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}

/* ===================================================================
   24-31. Piso de accesibilidad en LOS DOS TEMAS (2026-09-10)

   Auditoria de especialista-performance-web (veredicto vinculante por
   cruech-craft) mas diseñador-branding para la parte de identidad.
   Todo medido con getComputedStyle sobre paginas reales, alternando
   html.theme-light en vivo. Se agrega al final del archivo a
   proposito: los selectores replican EXACTO los de mas arriba y ganan
   por orden de cascada, sin editar ninguna linea existente.
   =================================================================== */

/* --- 24. Token de accion: naranja de marca con texto encima --------
   El par blanco sobre #ff4b01 mide 3.36:1; el minimo para texto
   normal es 4.5:1. Medido en vivo sobre cuatro instancias distintas
   (login, tienda, sidebar activo, buscador de dominios). Ninguno de
   los botones califica como texto grande: el mayor es el .btn-lg de
   Pagar a 20px/400, y el corte real es 24px (o 18.66px en negrita).

   Se corrige, y no se respeta como decision de marca, porque
   normas-cruech.md fija que el piso de accesibilidad es inmune
   TAMBIEN a las normas de la casa: ninguna regla de ese documento
   --ni densidad-es-decision, ni neon-danado, ni identidad-cruech, ni
   calcar-manda-- autoriza bajar del minimo de accesibilidad.

   No rompe la identidad porque identidad-cruech admite variantes de
   opacidad o mezcla con negro/blanco del mismo #FF4B01 base: el
   mismo color de origen manipulado de forma sistematica, no uno
   inventado. Es interpolacion lineal hacia negro, el matiz no rota,
   solo baja la luminosidad. Branding fijo el techo de identidad en
   ~35% de mezcla; esto usa 18%.

   No se invirtio el texto a oscuro (que daria 4.96:1 dejando el
   naranja intacto) porque naranja saturado con texto negro es la
   combinacion universal de señaletica de peligro, y estos son los
   botones de Pagar y Renovar servicios.

   UN SOLO VALOR PARA AMBOS TEMAS a proposito: el par boton/texto es
   autocontenido, no depende de --surface-page. No crear variante
   light de este token. */
:root {
    /* Identidad. Sin texto de cuerpo encima sin verificar el par.
       Uso: bordes, iconos, acentos, neon de marca, fondos tenues. */
    --color-brand-primary: #ff4b01;
    /* Contrato: >=4.5:1 con texto blanco. Uso: fondo de boton, chip o
       badge con texto. #ff4b01 mezclado 18% con negro -> 4.77:1. */
    --color-brand-primary-action: #d13e01;
}
.btn-default,
.btn-primary,
.summary-container .btn-success,
.card-accent-emerald .card-body .btn-success,
.hostiko-domain-search .home-domain-search .btn-primary,
#main-body .btn-outline-primary,
.card-sidebar .list-group-item.active,
.panel-sidebar .list-group-item.active,
.products .product .get_started,
.product.clearfix .get_started,
a.get_started.btn,
.page-item.active .page-link,
.paginate_button.current,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
a.badge-secondary:hover,
a.badge-secondary:focus,
a.badge-secondary.active {
    background-color: var(--color-brand-primary-action) !important;
    border-color: var(--color-brand-primary-action) !important;
}
/* El .btn-success generico (linea 372) queda en transparent a
   proposito y NO se toca: solo se corrigen los que de verdad pintan
   naranja de fondo. Los :hover ya usan --global--color-primary
   (#201d24, 16.6:1) y tampoco se tocan. */

/* --- 25. Precio del TLD invisible en modo claro --------------------
   .home-domain-search .tld-logos .tld-price lleva color:#ffffff con
   !important. El contenedor tiene .bg-white y en modo claro pasa a
   #ffffff, pero el texto sigue clavado en blanco: 1.00:1, los precios
   desaparecen de la home publica (index.php, "Registra Tu Dominio").
   Confirmado en vivo. El .tld-name de al lado no se toca: es naranja
   20px/700, texto grande en negrita, exento del 4.5:1. */
.home-domain-search .tld-logos .tld-price {
    color: var(--text-heading) !important;
}

/* --- 26. Links naranja sobre fondo claro ---------------------------
   La regla global de links da 5.91:1 sobre el fondo oscuro (pasa)
   pero 3.36:1 sobre blanco (no pasa). A diferencia del boton, aca el
   par SI depende del tema, asi que la correccion es theme-aware y
   solo toca el modo claro. Confirmado en vivo sobre el link de
   Terminos de servicio del checkbox obligatorio de register.php
   (13px/300), que esta en el flujo de alta de cuenta. */
html.theme-light a {
    color: var(--color-brand-primary-action);
}

/* --- 27. Foco de teclado en campos de formulario -------------------
   La correccion de 2026-08-28 cubrio .btn:focus-visible pero no los
   campos: input, select y textarea tienen outline:none sin sustituto
   y border-color identico con y sin foco (medido: rgb(52,48,58) en
   los dos estados). Navegar con Tab por el login, el carrito o el
   registro deja al usuario sin saber donde esta parado.
   Los checkbox y radio nativos usan el outline del navegador, que es
   rgb(16,16,16): 1.04:1 sobre el fondo oscuro, invisible -- y como
   oscuro es el default incondicional, falla para toda visita nueva.
   Mismo patron que .btn:focus-visible, por consistencia. */
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--text-heading) !important;
    outline-offset: 2px !important;
}

/* --- 28. Borde de los CONTROLES a 3:1 ------------------------------
   --border-subtle mide 1.54:1 en oscuro y 1.44:1 en claro contra su
   fondo. WCAG 1.4.11 pide 3:1 para componentes de interfaz.
   Se introduce un token aparte en vez de subir --border-subtle
   global: ese token tambien dibuja bordes de tarjetas y separadores,
   que son decorativos y no caen bajo 1.4.11; subirlo cambiaria el
   aspecto de todo el panel sin necesidad. Este token se aplica solo
   donde el borde ES el que delimita el control.
   Medido: #6b6570 sobre #0a0910 = 3.51:1 ; #8e8993 sobre #ffffff = 3.41:1 */
:root { --border-control: #6b6570; }
html.theme-light { --border-control: #8e8993; }
.form-control,
select.form-control,
textarea.form-control,
.custom-select,
.custom-control-label::before {
    border-color: var(--border-control) !important;
}

/* --- 29. Campos de la direccion de facturacion en register.php -----
   Llevan solo la clase .field, sin .form-control, asi que nunca
   entraron al theming (la regla generica de arriba solo cubre
   .form-control) y quedan como cajas blancas nativas dentro de un
   formulario oscuro. El texto adentro es legible (#626262 sobre
   blanco, 6.1:1): no es falla WCAG, es incumplimiento de
   dark-por-defecto. Se excluyen los controles que no son campos de
   texto para no pintar checkboxes ni botones. */
#registration .field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    background-color: var(--surface-page) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-control) !important;
}

/* --- 30. Numeros tabulares en montos -------------------------------
   Sin font-variant-numeric cada digito mide distinto y una columna de
   precios baila de ancho al escanearla. No habia ninguna regla
   tabular-nums en ninguno de los cuatro CSS del panel. */
.order-summary,
.summary-container,
.subtotal,
.tld-price,
table td .price,
.invoice-total,
#order-standard_cart .cart-total {
    font-variant-numeric: tabular-nums;
}

/* --- 31. Seleccion de texto y caret con identidad ------------------
   ::selection usaba el azul por defecto del navegador, y caret-color
   solo resolvia a blanco por herencia de currentColor: funciona hoy,
   pero es fragil. Se declaran explicitos. */
::selection {
    background-color: rgba(255, 75, 1, 0.30);
    color: var(--text-heading);
}
.form-control, input, textarea {
    caret-color: var(--color-brand-primary);
}

/* ===================================================================
   32-34. Cabeceras rotas en modo claro (2026-09-10)
   Reporte de Alexis: "las cabeceras se ven mal los contrastes".
   Medido en app.cruechone.com/index.php alternando html.theme-light.
   =================================================================== */

/* --- 32. Zonas de fondo oscuro FIJO con texto de token variable ----
   CAUSA RAIZ. El header, la topbar, el footer y el menu movil se
   quedan oscuros en los DOS temas -- decision tomada y documentada
   (ver "#5 CAUSA RAIZ" del 2026-07-19). Pero el texto que va adentro
   hereda los tokens semanticos, que SI cambian con el tema. En modo
   claro --text-body pasa a #201d24 y queda texto casi negro sobre
   fondo casi negro.

   Medido en modo claro, antes de esta regla:
     buscador de la base de conocimientos ... 1.19:1
     enlace "Cuenta" del topbar ............. 1.19:1
   (En modo oscuro los mismos elementos dan 19.82:1: por eso nunca se
   habia visto. Es exactamente el defecto que se arregla mirando UN
   solo tema.)

   No se corrige elemento por elemento: se redefinen los tokens DENTRO
   de esas zonas. Como las custom properties heredan, cualquier regla
   que ya use var(--text-body) o var(--border-control) ahi adentro
   pasa a resolver al valor oscuro correcto, incluidas las que se
   escriban a futuro. Es una sola regla en vez de una lista que hay
   que ir ampliando. */
html.theme-light .top-bar-section,
html.theme-light .topbar,
html.theme-light #header,
html.theme-light header.header,
html.theme-light #mainNavbar,
html.theme-light .navbar-collapse,
html.theme-light #footer,
html.theme-light .footer-section {
    --surface-page: #0a0910;
    --surface-card: #131116;
    --text-heading: #ffffff;
    --text-body: #ffffff;
    --text-muted: #b4b0b9;
    --border-subtle: #34303a;
    --border-control: #6b6570;
}

/* --- 33. Boton "Contactenos" del navbar ----------------------------
   Quedo fuera del grupo de la regla 24 porque no usa ninguna clase
   .btn-*: es un <a> dentro de #Primary_Navbar-Contact_Us al que otra
   regla le pinta el fondo naranja directo. Medido: blanco sobre
   #ff4b01 = 3.36:1 en AMBOS temas. Pasa al token de accion como el
   resto de los botones con texto encima. */
#Primary_Navbar-Contact_Us > a,
#Primary_Navbar-Contact_Us .nav-link {
    background-color: var(--color-brand-primary-action) !important;
    border-color: var(--color-brand-primary-action) !important;
}

/* --- 34. Contador del carrito (badge-info) -------------------------
   El azul semantico de Bootstrap (#17a2b8) con texto blanco mide
   3.04:1, y ademas el numero va a 8px, o sea el texto mas chico de
   toda la cabecera. Se oscurece 25% el mismo azul -> #117a8a, 5.03:1.
   Es el unico badge semantico que se toca: los demas (success,
   warning, danger) no llevan texto tan chico ni estan en la cabecera,
   y se revisan aparte. */
.top-bar-right-content .cart-btn .badge-info,
.top-bar-section .badge-info,
.topbar .badge-info {
    background-color: #117a8a !important;
    color: #ffffff !important;
}

/* ===================================================================
   35-36. Correcciones a las reglas 32 y 33, tras medir el resultado
   =================================================================== */

/* --- 35. --topbar-icon tambien cambia con el tema -------------------
   La regla 32 redefinio los tokens de superficie dentro de las zonas
   oscuras fijas, pero el enlace "Cuenta" siguio midiendo 1.19:1 en
   modo claro. Motivo: su color no sale de --text-body sino de
   --topbar-icon (regla de la linea 116), que es OTRO token que cambia
   con el tema (#ffffff oscuro / #201d24 claro). Cuando la cabecera
   paso a ser oscura fija, ese token quedo variando sin que nadie lo
   notara, porque en el tema por defecto da el valor correcto.
   Se agrega a la lista de tokens congelados dentro de esas zonas. */
html.theme-light .top-bar-section,
html.theme-light .topbar,
html.theme-light #header,
html.theme-light header.header,
html.theme-light #mainNavbar,
html.theme-light .navbar-collapse,
html.theme-light #footer,
html.theme-light .footer-section {
    --topbar-icon: #ffffff;
}

/* --- 36. Boton "Contactenos": se redefine el TOKEN, no el fondo -----
   La regla 33 no gano: la linea 237 usa el selector
   "#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a"
   (especificidad 3-1-1 con !important) contra el 1-0-1 de la regla 33.

   Subir la especificidad seria un error: en el menu movil la linea
   1273 pone ese mismo boton en background transparent a proposito
   (deja de ser boton y pasa a ser un item mas de la lista), y una
   regla mia al final del archivo, fuera de su media query, se lo
   pisaria y le pintaria un bloque naranja al menu movil.

   En vez de pelear la cascada se redefine --global--color-bright-orange
   SOLO dentro de este <li>. La regla 237 ya pinta con
   var(--global--color-bright-orange), asi que resuelve al color nuevo
   sin tocarla; y la 1273, que pinta con "transparent" literal, sigue
   transparente en movil. El hover de la 1278 usa el mismo var para el
   texto y tambien queda consistente.
   Medido despues: 3.36:1 -> 4.77:1 en ambos temas. */
#Primary_Navbar-Contact_Us {
    --global--color-bright-orange: #d13e01;
}

/* ===================================================================
   37-40. Distribucion y espaciado del Inicio del portal (2026-09-10)
   Reporte de Alexis: "la distribucion y espacios tambien se ven mal".
   Diagnostico de diseñador-web medido con Playwright sobre la pagina
   real en 390/768/1440/1920. NO toca color ni contraste.
   =================================================================== */

/* --- 37. Hero: baja la proporcion y saca el falso boton ------------
   Medido: el hero ocupa 36.6% del viewport en 1440x900, y el campo de
   busqueda de dominio (primera accion real de la pagina) recien
   aparece al 65.9% de la altura. Baja a ~28%.
   Falla el criterio 1 de densidad-es-decision (punto de entrada
   verificable): no hay NINGUN elemento clickeable real en todo el
   hero, asi que esto no es densidad, es ausencia de accion. */
.hostiko-banner-whmcs { padding: 56px 0 40px; }
.hostiko-banner-whmcs .title-heading { font-size: 42px; line-height: 48px; margin-bottom: 14px; }
.hostiko-banner-whmcs .title-text { padding: 0 260px; margin-bottom: 20px; }

/* El pill "INICIO DEL PORTAL" NO es un boton ni un link: es el
   breadcrumb activo (<li class="breadcrumb-item active"> sin href),
   estilado con borde, padding y mayusculas igual que un CTA. Es una
   falsa afordancia: parece la accion principal de la pagina y no hace
   nada al hacer clic.
   Se le quita el tratamiento de pill SOLO cuando el breadcrumb tiene
   un unico item, que es cuando miente. En las paginas internas
   (Inicio del portal / Area de cliente / Mis servicios / Renovar) el
   contenedor con borde si lee como grupo de breadcrumb y se conserva.
   El arreglo de fondo es sacarlo del HTML o volverlo link real: eso
   queda para programador-fullstack, esto solo evita que mienta. */
.hostiko-banner-whmcs .breadcrumb:not(:has(.breadcrumb-item:nth-child(2))) {
    border: none;
    padding: 0;
    background: transparent;
}

@media screen and (max-width:1199px){
  .hostiko-banner-whmcs { padding: 48px 0 36px; }
  /* !important necesario: la regla original de este breakpoint tambien lo usa */
  .hostiko-banner-whmcs .title-heading { font-size: 36px !important; line-height: 42px !important; margin-bottom: 10px; }
  .hostiko-banner-whmcs .title-text { padding: 0 120px; margin-bottom: 16px; }
}
@media screen and (max-width:991px){
  .hostiko-banner-whmcs { padding: 40px 0 28px; }
  .hostiko-banner-whmcs .title-heading { font-size: 32px !important; line-height: 38px !important; margin-bottom: 8px; }
  .hostiko-banner-whmcs .title-text { padding: 0 40px; margin-bottom: 12px; }
}
@media screen and (max-width:767px){
  .hostiko-banner-whmcs { padding: 36px 0 24px; }
  .hostiko-banner-whmcs .title-heading { font-size: 28px !important; line-height: 34px !important; margin-bottom: 8px; }
  .hostiko-banner-whmcs .title-text { padding: 0 20px; margin-bottom: 12px; }
}
@media screen and (max-width:575px){
  .hostiko-banner-whmcs { padding: 32px 0 20px; }
}

/* --- 38. Fila de TLDs: sacar los separadores de "tabla" ------------
   Los bordes exteriores SI alineaban con el buscador (delta 0px en
   los cuatro viewports): el problema no era alineacion. Era el
   "border-right: 2px" de cada <li>, que trata cada TLD como celda de
   un grid rigido en vez de item de una lista. Defecto de agrupamiento
   (criterio 2/3 de densidad-es-decision). */
.hostiko-domain-search .home-domain-search .tld-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 32px;
    margin-bottom: 16px;
}
.hostiko-domain-search .home-domain-search .tld-logos li,
.hostiko-domain-search .home-domain-search .tld-logos li:first-child,
.hostiko-domain-search .home-domain-search .tld-logos li:last-child {
    padding: 0;
    border: none;
}

/* --- 39. "Ver Todos Los Precios" huerfano --------------------------
   Medido en left 993-1163px de un contenedor de 886px, solo en su
   linea, sin nada a la izquierda ni relacion visual con la fila que
   lo precede. Se centra bajo la fila para que lea como continuacion.
   !important necesario: el HTML trae la clase Bootstrap .float-right,
   que define float:right !important de fabrica. */
.hostiko-domain-search .home-domain-search .btn-link {
    float: none !important;
    display: block;
    text-align: center;
    margin: 4px auto 0;
}

/* --- 40. Carrusel de servicios vacio -------------------------------
   HALLAZGO DE FONDO, y no es CSS: ".pricing-carousel" esta VACIO en
   produccion -- <ul class="nav nav-tabs"> sin ningun <li> y
   <div class="tab-content"> sin items. No hay productos featured
   cargados en WHMCS para ese widget, o el widget no resuelve datos.
   Encima, la linea 659 apaga con display:none el h2 que deberia
   anclar la seccion siguiente.
   Espacio muerto medido, del texto al primer contenido real:
     390px -> 183px | 768 -> 213px | 1440 -> 283px | 1920 -> 308px
   No es aire deliberado: es aire reservado para contenido que la
   pagina promete y no entrega.
   ESTO ES MITIGACION, NO LA CAUSA. La causa se arregla cargando los
   productos featured (config WHMCS). Aun asi el padding de fabrica
   (100-160px) es excesivo incluso con el carrusel lleno, asi que
   estas reglas siguen siendo correctas cuando se llene. */
.pricing-carousel { padding: 56px 0 72px; }
@media screen and (max-width:1199px){ .pricing-carousel { padding: 44px 0 56px; } }
@media screen and (max-width:991px){  .pricing-carousel { padding: 32px 0 48px; } }
@media screen and (max-width:767px){  .pricing-carousel { padding: 24px 0 40px; } }

/* Colapso solo mientras este vacio. :has() tiene soporte base desde
   2023; en un navegador viejo el selector no matchea, la regla se
   ignora entera y el visitante ve el padding reducido de arriba en
   vez del colapso. Degradacion segura. */
.pricing-carousel:not(:has(.item)) {
    padding-top: 32px;
    padding-bottom: 32px;
}
.pricing-carousel:not(:has(.item)) .nav-tabs { display: none; }

/* ===================================================================
   41. Grilla de productos: masonry -> grid alineado (2026-09-10)

   El contenedor es ".card-columns.home", el masonry de Bootstrap 4
   (CSS multi-column, column-count:3). Las tarjetas fluyen de arriba a
   abajo POR COLUMNA, no por fila, asi que sus bordes superiores e
   inferiores no coinciden entre columnas. Medido en la primera fila
   visual: alturas de 185, 220 y 275px -- 90px de diferencia.

   El masonry es correcto para contenido de altura naturalmente
   dispar (galerias, notas, un muro). Es el layout equivocado para un
   catalogo de planes: ahi el usuario COMPARA, y comparar exige que
   los elementos equivalentes queden a la misma altura y el precio o
   el boton caigan en la misma linea. Ademas el masonry por columnas
   reordena la lectura en vertical, asi que el orden en que se leen
   los productos deja de ser el orden en que estan en el HTML.

   Se pasa a grid con filas alineadas, la tarjeta se estira a la
   altura de su fila y el boton se ancla abajo, para que todos los
   CTA queden en la misma linea de base.
   =================================================================== */
.card-columns.home {
    column-count: initial !important;
    column-gap: normal !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.card-columns.home > .card {
    display: flex !important;
    flex-direction: column;
    margin-bottom: 0 !important;
    height: 100%;
}
.card-columns.home > .card > .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* El CTA se ancla al fondo: con alturas de texto distintas, los
   botones igual quedan alineados entre si. */
.card-columns.home > .card > .card-body > .btn,
.card-columns.home > .card > .card-body > a.btn {
    margin-top: auto;
}
/* Bootstrap define el column-count de .card-columns por breakpoint;
   se replican los cortes como columnas de grid. */
@media (max-width: 991.98px) {
    .card-columns.home { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .card-columns.home { grid-template-columns: 1fr; }
}