/* ==========================================================================
   GoServix Branding - WHMCS Twenty-One
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

:root {
    --gs-blue: #1091EF;
    --gs-blue-hover: #0D7DD6;
    --gs-orange: #FF7F22;
    --gs-orange-hover: #E66D10;
    --gs-navy: #0A2540;
    --gs-text: #545559;
    --gs-heading: #222222;
    --gs-light-bg: #F4F4F4;
    --gs-white: #ffffff;
    --gs-radius: 100px;
    --gs-radius-sm: 6px;
    --gs-container: 1600px;
    --gs-content: 1600px;
    --gs-side: 20px;

}
/* ==========================================================================
   Mobile panel: force navy links + hide "Más" toggle + hide carets
   ========================================================================== */
#gs-mobile-panel .collapsable-dropdown-menu .dropdown-item a,
#gs-mobile-panel .collapsable-dropdown-menu li a,
#gs-mobile-panel .collapsable-dropdown .dropdown-menu li a,
div.gs-mobile-panel ul.collapsable-dropdown-menu li a {
    color: #0A2540 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 38px !important;
}
#gs-mobile-panel .collapsable-dropdown-menu .dropdown-item a:hover,
#gs-mobile-panel .collapsable-dropdown .dropdown-menu li a:hover {
    color: #1091EF !important;
}
#gs-mobile-panel .collapsable-dropdown > a,
#gs-mobile-panel li.collapsable-dropdown > a.dropdown-toggle {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
#gs-mobile-panel li.collapsable-dropdown {
    border: none !important;
    padding: 0 !important;
}
#gs-mobile-panel #nav .dropdown-toggle::after {
    display: none !important;
}

/* --- Typography --- */
html { font-size: 14px !important; }
html, body { height: auto !important; min-height: 100vh !important; }
body, .btn, input, select, textarea, .form-control,
p, span, div, li, a, td, th, label {
    font-family: "Poppins", -apple-system, sans-serif !important;

}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: "Poppins", sans-serif !important;
    color: var(--gs-heading) !important;
    font-weight: 600 !important;

}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.gs-topbar {
    background: var(--gs-navy) !important;
    width: 100% !important;
    z-index: 1050 !important;
    display: block !important;

}
.gs-topbar-inner {
    max-width: var(--gs-container) !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 45px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.8) !important;

}
.gs-topbar-left { display: flex !important; align-items: center !important; gap: 20px !important; }
.gs-topbar-left a { color: rgba(255,255,255,0.8) !important; text-decoration: none !important; font-size: 13px !important; }
.gs-topbar-left a:hover { color: #fff !important; }
.gs-topbar-right { display: flex !important; align-items: center !important; gap: 8px !important; }
.gs-topbar-toggle, .gs-topbar-login {
    background: none !important; border: none !important;
    color: rgba(255,255,255,0.8) !important;
    font-family: "Poppins", sans-serif !important; font-size: 13px !important;
    cursor: pointer !important; display: flex !important; align-items: center !important;
    gap: 6px !important; padding: 4px 10px !important; border-radius: 4px !important;

}
.gs-topbar-toggle:hover, .gs-topbar-login:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
.gs-topbar-toggle svg, .gs-topbar-login svg { width: 14px !important; height: 14px !important; fill: currentColor !important; }
.gs-topbar-panel, .gs-login-panel {
    display: none !important; position: absolute !important; top: 100% !important; right: 0 !important;
    background: #fff !important; border-radius: 6px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important; min-width: 160px !important;
    z-index: 1060 !important; margin-top: 4px !important; overflow: hidden !important;

}
.gs-topbar-dropdown.open .gs-topbar-panel,
.gs-login-dropdown.open .gs-login-panel { display: block !important; }
.gs-topbar-dropdown, .gs-login-dropdown { position: relative !important; }
.gs-topbar-option { display: block !important; padding: 10px 16px !important; color: var(--gs-text) !important; text-decoration: none !important; font-size: 13px !important; cursor: pointer !important; }
.gs-topbar-option:hover { background: var(--gs-light-bg) !important; color: var(--gs-heading) !important; }
.gs-login-panel { min-width: 280px !important; padding: 20px !important; }
.gs-login-panel input[type="email"], .gs-login-panel input[type="password"] {
    width: 100% !important; padding: 8px 12px !important; border: 1px solid #ddd !important;
    border-radius: var(--gs-radius-sm) !important; font-size: 13px !important;
    display: block !important; box-sizing: border-box !important; margin-bottom: 10px !important;

}
.gs-login-panel .gs-login-btn {
    width: 100% !important; padding: 10px !important; background: var(--gs-blue) !important;
    color: #fff !important; border: none !important; border-radius: var(--gs-radius-sm) !important;
    font-weight: 500 !important; cursor: pointer !important; font-size: 14px !important;

}
.gs-login-panel .gs-login-btn:hover { background: var(--gs-blue-hover) !important; }
.gs-login-panel .gs-login-links { margin-top: 12px !important; display: flex !important; justify-content: space-between !important; font-size: 12px !important; }
.gs-login-panel .gs-login-links a { color: var(--gs-blue) !important; text-decoration: none !important; }
.gs-user-links a { display: block !important; padding: 8px 0 !important; color: var(--gs-text) !important; text-decoration: none !important; font-size: 13px !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; }
.gs-user-links a:last-child { border-bottom: none !important; }
.gs-user-links a:hover { color: var(--gs-blue) !important; }
@media (max-width: 767px) {
    .gs-topbar-left { display: none !important; }
    .gs-topbar-right { width: 100% !important; justify-content: flex-end !important; }

}

/* ==========================================================================
   HEADER
   ========================================================================== */
#header > .topbar { display: none !important; }

#header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    background: var(--gs-white) !important;
    transition: box-shadow 0.3s ease !important;

}
#header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important; }

#header .navbar.navbar-light {
    background: var(--gs-white) !important;
    padding: 0 !important; border: none !important; box-shadow: none !important;

}
#header .navbar.navbar-light > .container {
    max-width: var(--gs-container) !important;
    height: 75px !important;
    display: flex !important; align-items: center !important;

}
a.navbar-brand, a.navbar-brand:hover, a.navbar-brand:focus {
    font-family: "Poppins", sans-serif !important;
    font-size: 28px !important; font-weight: 700 !important;
    color: var(--gs-navy) !important; letter-spacing: 1px !important;
    text-decoration: none !important;

}
#header .navbar.navbar-light .form-inline { display: none !important; }
#header .main-navbar-wrapper {
    background: var(--gs-white) !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    border-bottom: none !important; box-shadow: none !important; padding: 0 !important;

}
#header .main-navbar-wrapper .container { max-width: var(--gs-container) !important; }

/* Nav links */
#nav .nav-link, #nav .dropdown-toggle, #nav > li > a {
    font-size: 15px !important; font-weight: 500 !important;
    color: var(--gs-heading) !important; padding: 12px 14px !important;
    position: relative !important;

}
#nav .nav-link:hover, #nav .nav-item.active > .nav-link, #nav > li > a:hover {
    color: var(--gs-blue) !important;

}

/* Cuenta button - orange pill */
.navbar-nav.ml-auto > .nav-item:last-child > .nav-link,
.navbar-nav.ml-auto > .nav-item:last-child > .dropdown-toggle {
    background: var(--gs-orange) !important; color: #fff !important;
    border-radius: var(--gs-radius) !important; padding: 8px 22px !important;
    font-weight: 500 !important; font-size: 14px !important; margin-left: 8px !important;

}
.navbar-nav.ml-auto > .nav-item:last-child > .nav-link:hover,
.navbar-nav.ml-auto > .nav-item:last-child > .dropdown-toggle:hover {
    background: var(--gs-orange-hover) !important; color: #fff !important;

}
.navbar-nav.ml-auto .dropdown-menu a {
    background: none !important; color: var(--gs-text) !important;
    border-radius: 0 !important; padding: 5px 16px !important; margin-left: 0 !important;

}
.navbar-nav.ml-auto .dropdown-menu a:hover { background: var(--gs-light-bg) !important; color: var(--gs-heading) !important; }

/* Cart */
.cart-btn { color: var(--gs-heading) !important; }
.cart-btn .badge-info, .cart-btn .badge { background: var(--gs-orange) !important; border-radius: 50% !important; color: #fff !important; }

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.master-breadcrumb { background: transparent !important; }
.master-breadcrumb .breadcrumb { background: transparent !important; margin: 0 !important; padding: 10px 0 !important; }
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a,
.master-breadcrumb .breadcrumb-item.active { color: #888 !important; font-size: 13px !important; }
.master-breadcrumb .breadcrumb-item a:hover { color: var(--gs-blue) !important; }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #bbb !important; }

/* ==========================================================================
   DOMAIN SEARCH (homepage)
   ========================================================================== */
.home-domain-search {
    background: var(--gs-white) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    padding: 40px 0 !important;

}
.home-domain-search h2, .home-domain-search .h2 {
    color: var(--gs-heading) !important;
    font-weight: 700 !important;

}

/* ==========================================================================
   CARDS & PANELS
   ========================================================================== */
.card, .panel, .panel-surround {
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    overflow: hidden !important;

}
.card:hover, .panel:hover, .panel-surround:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;

}

/* Icon card top bars - all blue */
.card-icon-top .highlight,
.icon-card-header,
.card .highlight,
.panel .highlight,
.panel-card .highlight {
    background: var(--gs-blue) !important;

}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-primary, .btn-primary:focus {
    background: var(--gs-blue) !important; border-color: var(--gs-blue) !important;
    border-radius: var(--gs-radius-sm) !important; font-weight: 500 !important;

}
.btn-primary:hover, .btn-primary:active { background: var(--gs-blue-hover) !important; border-color: var(--gs-blue-hover) !important; }
.btn-success { background: var(--gs-blue) !important; border-color: var(--gs-blue) !important; }
.btn-outline-primary, .btn-default {
    border-color: var(--gs-blue) !important; color: var(--gs-blue) !important;
    border-radius: var(--gs-radius-sm) !important; font-weight: 500 !important;

}
.btn-outline-primary:hover, .btn-default:hover {
    background: var(--gs-blue) !important; color: #fff !important; border-color: var(--gs-blue) !important;

}

/* ==========================================================================
   LINKS
   ========================================================================== */
a { color: var(--gs-blue) !important; }
a:hover { color: var(--gs-blue-hover) !important; }
/* Exceptions */
.gs-topbar a, .gs-topbar-left a, .gs-footer a, .gs-footer-links a,
.gs-topbar-toggle, .gs-topbar-login, .gs-user-links a,
#nav a, .navbar-brand, .cart-btn,
.master-breadcrumb a { color: inherit !important; }

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar .list-group-item.active { background: var(--gs-blue) !important; border-color: var(--gs-blue) !important; }

/* ==========================================================================
   TABLES
   ========================================================================== */
.table thead th { background: var(--gs-light-bg) !important; border-bottom: 2px solid var(--gs-blue) !important; font-weight: 600 !important; }

/* ==========================================================================
   FOOTER (original hidden)
   ========================================================================== */
footer#footer.footer { display: none !important; }

/* GoServix Footer */
.gs-footer {
    background: var(--gs-navy) !important; color: rgba(255,255,255,0.6) !important;
    padding: 0 !important; margin-top: 60px !important; display: block !important;

}
.gs-footer-container { max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; }
.gs-footer-columns { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr !important; gap: 40px !important; padding: 60px var(--gs-side) !important; max-width: var(--gs-container) !important; margin: 0 auto !important; }
.gs-footer-logo {
    font-family: "Poppins", sans-serif !important; font-size: 22px !important; font-weight: 700 !important;
    color: #fff !important; letter-spacing: 1px !important; text-decoration: none !important;
    display: block !important; margin-bottom: 16px !important;

}
.gs-footer-logo:hover { color: #fff !important; text-decoration: none !important; }
/* Logo e iconos sociales en blanco (igualar a WordPress: vencer .gs-footer a{color:inherit}) */
.gs-footer .gs-footer-logo, .gs-footer .gs-footer-logo:hover { color: #fff !important; }
.gs-footer .gs-footer-social a { color: #fff !important; }
.gs-footer-desc { color: rgba(255,255,255,0.6) !important; font-size: 14px !important; line-height: 1.6 !important; }
.gs-footer-title { font-size: 16px !important; font-weight: 600 !important; color: var(--gs-blue) !important; margin-bottom: 20px !important; }
.gs-footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.gs-footer-links li { margin-bottom: 10px !important; }
.gs-footer-links a { color: rgba(255,255,255,0.6) !important; text-decoration: none !important; font-size: 14px !important; line-height: 38px !important; }
.gs-footer-links a:hover { color: #fff !important; }
.gs-footer-bottom {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    margin: 40px auto 0 !important; max-width: var(--gs-container) !important; box-sizing: border-box !important; border-top: 1px solid rgba(255,255,255,0.1) !important; padding: 25px var(--gs-side) !important;

}
.gs-footer-copyright { color: rgba(255,255,255,0.5) !important; font-size: 13px !important; }
.gs-footer-bottom-right { display: flex !important; align-items: center !important; gap: 16px !important; }
.gs-footer .gs-topbar-toggle { color: rgba(255,255,255,0.8) !important; font-size: 13px !important; border: 1px solid rgba(255,255,255,0.25) !important; border-radius: 6px !important; padding: 4px 10px !important; }
.gs-footer .gs-topbar-toggle:hover { color: #fff !important; background: rgba(255,255,255,0.1) !important; }

@media (max-width: 991px) { .gs-footer-columns { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 575px) {
    .gs-footer-columns { grid-template-columns: 1fr !important; gap: 30px !important; }
    .gs-footer-bottom { flex-direction: column !important; gap: 20px !important; text-align: center !important; }

}
/* --gs-side reducido en móvil pequeño (igualar a WordPress home.css) */
@media (max-width: 560px) { :root { --gs-side: 18px; } }

/* ==========================================================================
   FIXES v3 - Cuenta button + Icon card bars
   ========================================================================== */

/* --- Cuenta button orange pill --- */
#Secondary_Navbar-Account > a.dropdown-toggle {
    background: var(--gs-orange) !important;
    color: #fff !important;
    border-radius: var(--gs-radius) !important;
    padding: 8px 22px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: background 0.2s ease !important;

}
#Secondary_Navbar-Account > a.dropdown-toggle:hover {
    background: var(--gs-orange-hover) !important;
    color: #fff !important;

}
#Secondary_Navbar-Account .dropdown-menu a {
    background: none !important;
    color: var(--gs-text) !important;
    border-radius: 0 !important;
    padding: 5px 16px !important;

}
#Secondary_Navbar-Account .dropdown-menu a:hover {
    background: var(--gs-light-bg) !important;
    color: var(--gs-heading) !important;

}

/* --- All icon card top bars → GoServix blue --- */
.card-accent-teal,
.card-accent-pomegranate,
.card-accent-sun-flower,
.card-accent-asbestos,
.card-accent-green,
.card-accent-midnight-blue,
.card-accent-gold,
.card-accent-red,
.card-accent-blue,
.card-accent-orange,
.card-accent-pink,
.card-accent-purple,
.card-accent-lime,
.card-accent-magenta,
.card-accent-turquoise,
.card-accent-emerald,
.card-accent-amethyst,
.card-accent-wet-asphalt,
.card-accent-silver,
.card-accent-brand-cpanel-orange,
.card-accent-brand-xovinow-blue,
[class*="card-accent-"] {
    border-top: 3px solid var(--gs-blue) !important;

}

/* ==========================================================================
   GoServix v4 - Visual polish
   ========================================================================== */

/* --- Merge logo + nav into single line --- */
#header .navbar.navbar-light {
    border-bottom: none !important;
    padding: 0 !important;

}
#header .navbar.navbar-light > .container {
    height: auto !important;
    padding: 12px 15px !important;

}
#header .main-navbar-wrapper {
    border-top: none !important;
    margin-top: -8px !important;
    padding-bottom: 8px !important;

}
/* Compact the overall header */
#header .navbar.navbar-light + .main-navbar-wrapper {
    border-top: none !important;

}

/* --- Hide breadcrumb on homepage only --- */
body.homepage .master-breadcrumb,
.master-breadcrumb:has(+ section #homepage),
nav.master-breadcrumb {
    /* Keep breadcrumbs but make them slimmer */
    padding: 0 !important;

}
.master-breadcrumb .breadcrumb {
    padding: 8px 0 !important;
    margin: 0 !important;
    font-size: 12px !important;

}

/* --- Cart page improvements --- */
/* Table header */
.table-responsive .table thead th,
.cart-body .table thead th,
#cartContainer .table thead th,
table.table thead th {
    background: var(--gs-navy) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;

}
/* Order summary card header */
.order-summary .card-header,
.card .card-header.bg-default,
.order-summary-header,
.card-header {
    background: var(--gs-navy) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 6px 6px 0 0 !important;

}
.card-header h3, .card-header h4, .card-header h5,
.card-header .h3, .card-header .h4, .card-header .h5 {
    color: #fff !important;

}
/* Checkout button */
.btn-checkout,
.order-summary .btn-primary,
#btnCompleteOrder,
a[href*="checkout"],
.btn-lg.btn-primary {
    background: var(--gs-orange) !important;
    border-color: var(--gs-orange) !important;
    border-radius: var(--gs-radius-sm) !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    font-size: 16px !important;

}
.btn-checkout:hover,
.order-summary .btn-primary:hover,
#btnCompleteOrder:hover {
    background: var(--gs-orange-hover) !important;
    border-color: var(--gs-orange-hover) !important;

}

/* --- Sidebar improvements --- */
.sidebar .card,
.sidebar .panel {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;

}
.sidebar .card-header,
.sidebar .panel-heading {
    background: var(--gs-light-bg) !important;
    color: var(--gs-heading) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;

}
/* Active sidebar item */
.sidebar .list-group-item.active,
.sidebar .list-group-item:active,
.sidebar a.active {
    background: var(--gs-blue) !important;
    border-color: var(--gs-blue) !important;
    color: #fff !important;

}
/* Sidebar list items */
.sidebar .list-group-item {
    font-size: 13px !important;
    padding: 10px 16px !important;
    transition: all 0.15s !important;
    color: var(--gs-text) !important;

}
.sidebar .list-group-item:hover {
    background: rgba(16,145,239,0.04) !important;
    color: var(--gs-blue) !important;

}

/* --- Login page card --- */
.login-container .card,
.main-content > .card,
section#main-body > .container > .card {
    max-width: 500px !important;
    margin: 40px auto !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;

}

/* --- Input fields global --- */
.form-control, input.form-control, select.form-control {
    border-radius: var(--gs-radius-sm) !important;
    border: 1px solid #ddd !important;
    padding: 10px 14px !important;
    transition: border-color 0.2s !important;

}
.form-control:focus {
    border-color: var(--gs-blue) !important;
    box-shadow: 0 0 0 3px rgba(16,145,239,0.1) !important;

}

/* --- Section spacing & alternating backgrounds --- */
section#main-body {
    padding-bottom: 40px !important;

}
/* Alternating sections on homepage */
.home-shortcuts {
    padding: 50px 0 !important;

}
.action-icon-btns {
    margin-bottom: 0 !important;

}

/* --- Icons in cards - consistent color --- */
.action-icon-btns a i,
.action-icon-btns a .fal,
.home-shortcuts a i,
.home-shortcuts a .fal {
    color: var(--gs-navy) !important;
    font-size: 2.5rem !important;

}
.action-icon-btns a:hover i,
.home-shortcuts a:hover i {
    color: var(--gs-blue) !important;

}

/* --- Dropdown menus --- */
.dropdown-menu {
    border: none !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    overflow: hidden !important;

}
.dropdown-menu .dropdown-item,
.dropdown-menu li a {
    padding: 5px 16px !important;
    font-size: 14px !important;
    transition: background 0.15s !important;

}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu li a:hover {
    background: rgba(16,145,239,0.06) !important;
    color: var(--gs-blue) !important;

}

/* --- "Resumen del pedido" fix --- */
.order-summary .card-body,
.order-summary .panel-body {
    padding: 20px !important;

}
.order-summary .total-due,
.order-summary h4 {
    color: var(--gs-heading) !important;
    font-weight: 700 !important;

}

/* ==========================================================================
   v5 - Single-line header (logo + nav + cart + cuenta)
   ========================================================================== */
.gs-main-nav {
    background: var(--gs-white) !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    box-sizing: border-box !important;
    height: 75px !important;

}
.gs-main-nav > .container {
    max-width: var(--gs-container) !important;
    height: 75px !important;
    display: flex !important;
    align-items: center !important;

}
.gs-main-nav .navbar-brand {
    font-family: "Poppins", sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: var(--gs-navy) !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    margin-right: 40px !important;
    padding: 0 !important;

}
.gs-main-nav .navbar-brand:hover { color: var(--gs-navy) !important; }
.gs-main-nav #nav .nav-link,
.gs-main-nav #nav .dropdown-toggle {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--gs-heading) !important;
    padding: 8px 14px !important;

}
.gs-main-nav #nav .nav-link:hover,
.gs-main-nav #nav .nav-item.active > .nav-link {
    color: var(--gs-blue) !important;

}

/* Hide the old separate navbar sections */
#header .navbar.navbar-light { display: none !important; }
#header .main-navbar-wrapper { display: none !important; }

/* ==========================================================================
   v6 - Fix sidebar card headers (not navy)
   ========================================================================== */

/* Reset: card-header should NOT be navy by default */
.card-header {
    background: var(--gs-light-bg) !important;
    color: var(--gs-heading) !important;
    border-radius: 0 !important;

}
.card-header h3, .card-header h4, .card-header h5,
.card-header .h3, .card-header .h4, .card-header .h5,
.card-header .panel-title {
    color: var(--gs-heading) !important;

}

/* Only order summary and specific contexts get navy header */
.order-summary .card-header,
.order-summary .panel-heading {
    background: var(--gs-navy) !important;
    color: #fff !important;

}
.order-summary .card-header h3, .order-summary .card-header h4,
.order-summary .card-header h5, .order-summary .card-header .panel-title {
    color: #fff !important;

}

/* Sidebar cards - clean, light style */
.card-sidebar .card-header,
.panel-sidebar .card-header,
.card-sidebar .panel-heading,
.sidebar .card-header,
.sidebar .panel-heading,
.cart-sidebar .card-header,
.cart-sidebar .panel-heading {
    background: var(--gs-navy) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;

}
.card-sidebar .card-header .panel-title,
.card-sidebar .card-header .card-title,
.panel-sidebar .card-header .panel-title,
.sidebar .card-header .panel-title,
.sidebar .card-header .card-title,
.cart-sidebar .card-header .panel-title {
    color: #fff !important;
    font-size: 16px !important;

}

/* Sidebar card bodies */
.card-sidebar .card-body,
.panel-sidebar .card-body,
.card-sidebar .panel-body {
    padding: 12px 16px !important;
    background: #fff !important;

}

/* Sidebar cards - no excessive hover */
.card-sidebar:hover,
.panel-sidebar:hover {
    transform: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;

}

/* Sidebar list items - compact */
.card-sidebar .list-group-item,
.panel-sidebar .list-group-item {
    font-size: 13px !important;
    padding: 5px 16px !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    color: var(--gs-text) !important;
    background: #fff !important;
    transition: all 0.15s !important;

}
.card-sidebar .list-group-item:hover,
.panel-sidebar .list-group-item:hover {
    background: rgba(16,145,239,0.04) !important;
    color: var(--gs-blue) !important;

}
.card-sidebar .list-group-item:last-child,
.panel-sidebar .list-group-item:last-child {
    border-bottom: none !important;

}
.card-sidebar .list-group-item.active {
    background: rgba(16,145,239,0.08) !important;
    color: var(--gs-blue) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--gs-blue) !important;

}
.card-sidebar .list-group-item a {
    color: var(--gs-text) !important;

}
.card-sidebar .list-group-item.active a,
.card-sidebar .list-group-item a:hover {
    color: var(--gs-blue) !important;

}

/* Chevron icon in sidebar headers */
.card-sidebar .card-minimise,
.panel-sidebar .panel-minimise {
    color: #fff !important;

}

/* ==========================================================================
   v7 - Fix sidebar duplication + layout
   ========================================================================== */

/* Hide the inline/collapsed sidebar on desktop - it duplicates the real sidebar */
.sidebar-collapsed {
    display: none !important;

}

/* On mobile, show collapsed sidebar, hide the floating sidebar */
@media (max-width: 767px) {
    .sidebar-collapsed {
        display: block !important;
    }
    .cart-sidebar {
        display: none !important;
    }

}

/* Cart sidebar - proper desktop sidebar layout */
.cart-sidebar {
    float: left !important;
    width: 280px !important;
    margin-right: 30px !important;

}

/* Secondary cart body (main content) - flow next to sidebar */
.secondary-cart-body {
    overflow: hidden !important;

}

/* Secondary cart sidebar (order summary) */
.secondary-cart-sidebar {
    margin-top: 20px !important;

}

/* ==========================================================================
   v8 - Product cards styling + layout fixes
   ========================================================================== */

/* Product cards in store */
.product {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 10px !important;
    padding: 30px 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    text-align: center !important;

}
.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;

}
.product header {
    border-bottom: 3px solid var(--gs-blue) !important;
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;

}
.product header span {
    font-family: "Poppins", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--gs-navy) !important;

}
.product .product-desc {
    color: var(--gs-text) !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
    min-height: 120px !important;

}
.product .product-pricing {
    font-size: 14px !important;
    color: var(--gs-text) !important;
    margin-bottom: 20px !important;

}
.product .product-pricing .price {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--gs-navy) !important;
    display: block !important;
    margin: 8px 0 !important;

}
.product footer {
    padding-top: 16px !important;

}
.product .btn-order-now,
.product .btn-success {
    background: var(--gs-orange) !important;
    border-color: var(--gs-orange) !important;
    border-radius: var(--gs-radius) !important;
    padding: 10px 28px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #fff !important;

}
.product .btn-order-now:hover,
.product .btn-success:hover {
    background: var(--gs-orange-hover) !important;
    border-color: var(--gs-orange-hover) !important;

}

/* Products grid - equal height */
.products .row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;

}
.products .row-eq-height > [class*="col-"] {
    display: flex !important;
    margin-bottom: 20px !important;

}
.products .row-eq-height .product {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

}

/* Cart sidebar + main content proper layout */
.cart-sidebar {
    width: 280px !important;
    flex-shrink: 0 !important;

}

/* Secondary cart layout */
.secondary-cart-body {
    flex: 1 !important;
    min-width: 0 !important;

}

/* Store page - row with sidebar */
.cart-sidebar + .sidebar-collapsed + div > .row,
.cart-body > .row {
    display: flex !important;
    gap: 30px !important;

}

/* ==========================================================================
   v9 - Cart layout fix (sidebar + content two-column)
   ========================================================================== */

/* The .row inside cart pages needs proper flex layout */
section#main-body .container > div > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 30px !important;

}

/* Cart sidebar - fixed width column */
.cart-sidebar {
    float: none !important;
    width: 280px !important;
    min-width: 280px !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;

}

/* Content after sidebar fills remaining space */
.cart-sidebar ~ .sidebar-collapsed ~ * {
    flex: 1 !important;
    min-width: 0 !important;

}

/* Also handle when content follows sidebar directly */
.cart-sidebar ~ div:not(.sidebar-collapsed):not(.cart-sidebar) {
    flex: 1 !important;
    min-width: 0 !important;

}

/* Domain transfer form - proper width */
.domain-transfer-search,
.transfer-search {
    max-width: 100% !important;

}
.domain-transfer-search .card,
.domain-transfer-search .panel {
    max-width: 600px !important;
    margin: 20px auto !important;

}

/* Domain register page - search bar full width */
.domain-search-container,
.domain-checker-container {
    max-width: 100% !important;

}

/* Mobile: stack vertically */
@media (max-width: 767px) {
    section#main-body .container > div > .row {
        flex-wrap: wrap !important;
    }
    .cart-sidebar {
        width: 100% !important;
        min-width: 100% !important;
    }

}

/* ==========================================================================
   v10 - Fix cart layout: sidebar + content side by side
   ========================================================================== */

/* Target the row that contains cart-sidebar - any nesting level */
.row:has(> .cart-sidebar) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;

}

.row > .cart-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    flex-shrink: 0 !important;
    float: none !important;
    padding-right: 30px !important;

}

/* Everything after sidebar-collapsed is the main content */
.row > .sidebar-collapsed ~ * {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 310px) !important;

}

/* When there is no sidebar-collapsed, direct sibling after cart-sidebar */
.row > .cart-sidebar ~ div:not(.sidebar-collapsed):not(.panel):not(.card) {
    flex: 1 !important;
    min-width: 0 !important;

}

/* Registration page sidebar fix - small orange square was a broken sidebar */
.primary-content > .row:first-child {
    display: flex !important;
    flex-wrap: nowrap !important;

}

/* Fix registration page: the col-lg-4 sidebar */
.primary-content > .row > .col-lg-4 {
    width: 280px !important;
    min-width: 280px !important;
    flex-shrink: 0 !important;
    max-width: 280px !important;

}
.primary-content > .row > .col-lg-8,
.primary-content > .row > .col-xl-9 {
    flex: 1 !important;
    max-width: none !important;

}

/* Mobile responsive */
@media (max-width: 767px) {
    .row:has(> .cart-sidebar) {
        flex-wrap: wrap !important;
    }
    .row > .cart-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        padding-right: 0 !important;
    }
    .row > .sidebar-collapsed ~ * {
        max-width: 100% !important;
    }

}

/* ==========================================================================
   v11 - Fix registration sidebar icon display
   ========================================================================== */
.sidebar-menu-item-wrapper {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    gap: 20px !important;

}
.sidebar-menu-item-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: rgba(16,145,239,0.1) !important;
    flex-shrink: 0 !important;

}
.sidebar-menu-item-icon {
    color: var(--gs-blue) !important;
    font-size: 16px !important;

}
.sidebar-menu-item-label {
    flex: 1 !important;
    font-size: 13px !important;
    color: var(--gs-text) !important;

}

/* ==========================================================================
   v13 - Unify sidebar items: inline icons match KB wrapper layout
   ========================================================================== */

/* Items with inline icons (store/cart) - match KB flex layout */
.card-sidebar .list-group-item:not(:has(.sidebar-menu-item-wrapper)):has(> i),
.panel-sidebar .list-group-item:not(:has(.sidebar-menu-item-wrapper)):has(> i) {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 16px !important;

}

/* Inline icon -> circular icon wrapper (same as .sidebar-menu-item-icon-wrapper) */
.card-sidebar .list-group-item:not(:has(.sidebar-menu-item-wrapper)) > i.fas,
.card-sidebar .list-group-item:not(:has(.sidebar-menu-item-wrapper)) > i.far,
.card-sidebar .list-group-item:not(:has(.sidebar-menu-item-wrapper)) > i.fal,
.panel-sidebar .list-group-item:not(:has(.sidebar-menu-item-wrapper)) > i.fas,
.panel-sidebar .list-group-item:not(:has(.sidebar-menu-item-wrapper)) > i.far,
.panel-sidebar .list-group-item:not(:has(.sidebar-menu-item-wrapper)) > i.fal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    background: rgba(16,145,239,0.1) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    color: var(--gs-blue) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;

}

/* Text-only items (no icon) - consistent padding */
.card-sidebar .list-group-item:not(:has(i)):not(:has(.sidebar-menu-item-wrapper)),
.panel-sidebar .list-group-item:not(:has(i)):not(:has(.sidebar-menu-item-wrapper)) {
    padding: 12px 16px !important;

}

/* Active item with inline icon - keep icon blue */
.card-sidebar .list-group-item.active:not(:has(.sidebar-menu-item-wrapper)) > i,
.panel-sidebar .list-group-item.active:not(:has(.sidebar-menu-item-wrapper)) > i {
    background: rgba(16,145,239,0.15) !important;
    color: var(--gs-blue) !important;

}

/* ==========================================================================
   v12 - Fix domain promo cards 2-column + inner rows
   ========================================================================== */

/* v12 rule replaced 2026-04-11 — the old broad nowrap was breaking KB/announcements.
   Only force nowrap on rows that explicitly contain a .cart-sidebar (cart/register pages) */
.primary-content > .row.has-cart-sidebar,
.primary-content > .row:has(> .cart-sidebar) {
    display: flex !important;
    flex-wrap: nowrap !important;
}
/* Default: primary-content rows wrap normally (Bootstrap default) */
.primary-content > .row {
    flex-wrap: wrap !important;
}

/* Reset: all other nested rows should behave normally */
.primary-content .row .row,
.secondary-cart-body .row,
.cart-body .row {
    /* FIX 2026-06-08: el display:flex !important machacaba el display:none inline con que
       WHMCS oculta #newCardInfo en el checkout → aparecían campos de tarjeta locales sobre
       la pasarela remota (PayPal/Stripe), deformándola. Se quita SOLO el !important del
       display (Bootstrap .row{display:flex} deja las filas visibles; el display:none inline
       vuelve a ganar en las ocultas). flex-wrap/gap se mantienen. */
    display: flex;
    flex-wrap: wrap !important;
    gap: 0 !important;

}

/* Override the too-broad v9/v10 rule */
section#main-body .container > div > .row .row {
    flex-wrap: wrap !important;
    gap: 0 !important;

}

/* Domain promo boxes - side by side */
.domain-promo-box {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 10px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;

}

/* ==========================================================================
   v13 - Breadcrumb: gris suave en vez de morado
   ========================================================================== */
.master-breadcrumb {
    background: transparent !important;

}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a,
.master-breadcrumb .breadcrumb-item.active {
    color: #888 !important;

}
.master-breadcrumb .breadcrumb-item a:hover {
    color: var(--gs-blue) !important;

}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #bbb !important;

}

/* === v14 - Fix logo hover grow === */
a.navbar-brand,
a.navbar-brand:hover,
a.navbar-brand:focus,
.gs-main-nav .navbar-brand,
.gs-main-nav .navbar-brand:hover,
.gs-main-nav .navbar-brand:focus {
    font-size: 30px !important;
    transform: none !important;
    transition: none !important;
    line-height: 1 !important;

}
@media (max-width: 1199px) {
    a.navbar-brand,
    a.navbar-brand:hover,
    a.navbar-brand:focus,
    a.navbar-brand:active,
    .gs-main-nav .navbar-brand,
    .gs-main-nav .navbar-brand:hover,
    .gs-main-nav .navbar-brand:focus,
    .gs-main-nav .navbar-brand:active {
        font-size: 24px !important;
        transform: none !important;
        transition: none !important;
    }

}

/* === v15 - Hide login button from topbar === */
.gs-login-dropdown,
#gs-login-dropdown {
    display: none !important;

}

/* === v16 - Cuenta dropdown: arrow + spacing === */
#Secondary_Navbar-Account .dropdown-menu {
    margin-top: 10px !important;
    overflow: visible !important;

}
#Secondary_Navbar-Account .dropdown-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -8px !important;
    right: 20px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid #fff !important;
    display: block !important;

}
#Secondary_Navbar-Account .dropdown-menu::after {
    content: "" !important;
    position: absolute !important;
    top: -9px !important;
    right: 19px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid rgba(0,0,0,0.08) !important;
    display: block !important;
    z-index: -1 !important;

}

/* === v17 - Cart dropdown menu === */
#CartDropdown {
    margin-left: 8px !important;

}
#CartDropdown .cart-btn.dropdown-toggle::after {
    display: none !important;

}
.cart-dropdown-menu {
    min-width: 280px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
    overflow: visible !important;

}
.cart-dropdown-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -8px !important;
    right: 20px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid #fff !important;
    display: block !important;

}
.cart-dropdown-menu::after {
    content: "" !important;
    position: absolute !important;
    top: -9px !important;
    right: 19px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid rgba(0,0,0,0.08) !important;
    display: block !important;
    z-index: -1 !important;

}
.cart-dropdown-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    font-size: 14px !important;
    color: var(--gs-heading) !important;

}
.cart-dropdown-body {
    padding: 16px !important;

}
.cart-dropdown-empty {
    text-align: center !important;
    padding: 20px 10px !important;
    color: var(--gs-text) !important;
    font-size: 13px !important;

}
.cart-dropdown-empty p {
    margin: 8px 0 12px !important;
    color: #999 !important;

}
.cart-dropdown-items {
    max-height: 200px !important;
    overflow-y: auto !important;

}
.cart-dropdown-item {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    font-size: 13px !important;

}
.cart-dropdown-item:last-child {
    border-bottom: none !important;

}
.cart-item-name {
    color: var(--gs-heading) !important;
    flex: 1 !important;

}
.cart-item-price {
    color: var(--gs-blue) !important;
    font-weight: 600 !important;
    margin-left: 12px !important;

}
.cart-dropdown-footer {
    padding-top: 12px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    margin-top: 8px !important;

}

/* === v18 - Cart badge no orange + Cuenta closer to cart === */
.cart-btn .badge-info,
.cart-btn .badge {
    background: var(--gs-navy) !important;
    color: #fff !important;

}
#CartDropdown {
    margin-left: 2px !important;

}
#Secondary_Navbar-Account {
    margin-right: 0 !important;

}
#Secondary_Navbar-Account > a.dropdown-toggle {
    margin-right: 4px !important;

}

/* === v19 - Cart badge transparent + buttons flush right === */
.cart-btn .badge-info,
.cart-btn .badge {
    background: transparent !important;
    color: var(--gs-heading) !important;
    font-weight: 600 !important;
    padding: 0 2px !important;

}
.navbar-nav.ml-auto {
    margin-right: 0 !important;
    gap: 0 !important;

}
#Secondary_Navbar-Account > a.dropdown-toggle {
    margin-left: 0 !important;
    margin-right: 0 !important;

}
#CartDropdown {
    margin-left: 0 !important;

}

/* === v20 - Force cart badge no background + flush right === */
#CartDropdown .badge,
#CartDropdown .badge-info,
#CartDropdown span.badge,
.navbar-nav #CartDropdown .cart-btn .badge {
    background: none !important;
    background-color: transparent !important;
    color: var(--gs-heading) !important;
    border: none !important;
    box-shadow: none !important;

}
#CartDropdown .cart-btn {
    background: none !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    border-radius: var(--gs-radius) !important;
    padding: 6px 14px !important;
    color: var(--gs-heading) !important;

}
#CartDropdown .cart-btn:hover {
    border-color: var(--gs-blue) !important;
    color: var(--gs-blue) !important;

}
/* Flush Cuenta + Cart to far right */
.gs-main-nav > .container {
    padding-right: 0 !important;

}
.navbar-nav.ml-auto.d-none.d-xl-flex {
    margin-right: 15px !important;
    gap: 20px !important;

}

/* === v21 - Hide Inicio + push nav items right === */
#Primary_Navbar-Home {
    display: none !important;

}

/* === Footer toggle: match WP style (bordered pill) === */
.gs-footer .gs-topbar-toggle {
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.8) !important;
    background: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s !important;

}
.gs-footer .gs-topbar-toggle:hover {
    color: #fff !important;
    border-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.1) !important;

}

/* =====================================================
   MODAL — Mismo código que WordPress (gs-modal-*)
   ===================================================== */
.gs-modal-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: center !important;
  display: none !important;

}
.gs-modal-overlay.gs-modal-open {
  display: flex !important;

}
.gs-modal-localisation {
  max-width: 800px !important;
  width: 90% !important;
  margin: 0 auto;
  padding-top: 0 !important;

}
.gs-modal-content {
  background: #3e3e3e !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-family: Poppins, sans-serif !important;

}
.gs-modal-body {
  padding: 20px 30px 10px !important;
  position: relative !important;

}
.gs-modal-close {
  position: absolute !important;
  top: 10px !important; right: 15px !important;
  background: none !important; border: none !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 28px !important;
  font-family: Arial, sans-serif !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 5px !important;

}
.gs-modal-close:hover { color: #fff !important; }
.gs-modal-title {
  font-size: 16px !important;
  font-family: Merriweather, Helvetica, Arial, Verdana, sans-serif !important;
  line-height: 20.8px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: #fff !important;
  padding: 20px 0 12px !important;
  margin: 0 !important;

}
.gs-modal-title-currency {
  padding-top: 25px !important;

}
.gs-modal-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;

}
.gs-modal-item {
  display: block !important;
  padding: 10px 16px !important;
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 38px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background: transparent !important;
  transition: all 0.15s !important;
  cursor: pointer !important;
  text-align: center !important;

}
.gs-modal-item:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.1) !important;

}
.gs-modal-item.active {
  color: #fff !important;
  background: var(--gs-blue) !important;
  border-color: var(--gs-blue) !important;

}
.gs-modal-footer {
  padding: 12px 30px 16px !important;
  text-align: right !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;

}
.gs-modal-apply {
  background: none !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
  padding: 8px 24px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  line-height: normal !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;

}
.gs-modal-apply:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.5) !important;

}

/* Hide Bootstrap modal (replaced by gs-modal) */
#modalChooseLanguage { display: none !important; }
.modal-backdrop { display: none !important; }

/* Footer toggle: botón con borde */
.gs-footer .gs-topbar-toggle {
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.8) !important;
  background: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

}
.gs-footer .gs-topbar-toggle:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
  background: rgba(255,255,255,0.1) !important;

}

@media (max-width: 768px) {
  .gs-modal-overlay.gs-modal-open {
    align-items: stretch !important;
    z-index: 10003 !important;
  }
  .gs-modal-localisation {
    width: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    padding-top: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .gs-modal-content {
    border-radius: 0 !important;
    border: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  .gs-modal-body {
    padding: 16px 20px 10px !important;
  }
  .gs-modal-close {
    position: fixed !important;
    top: 12px !important;
    right: 16px !important;
    z-index: 10002 !important;
    background: rgba(62,62,62,0.95) !important;
    padding: 4px 10px !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  }
  .gs-modal-body {
    padding-top: 8px !important;
  }
  .gs-modal-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gs-modal-title {
    padding-top: 10px !important;
  }
  .gs-modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    background: #3e3e3e !important;
    padding: 12px 20px 16px !important;
    z-index: 10 !important;
  }

}

/* ==========================================================================
   Desktop: hide all mobile-only elements
   ========================================================================== */
@media (min-width: 1200px) {
    #gs-mobile-panel {
        position: static !important;
        transform: none !important;
        width: auto !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
        /* Restore Bootstrap .navbar-collapse behavior */
        display: flex !important;
        flex-basis: auto !important;
        flex-grow: 1 !important;
        align-items: center !important;
    }
    .gs-mobile-panel:not(#gs-mobile-panel),
    .gs-mobile-overlay,
    #gs-mobile-overlay,
    .gs-mobile-close,
    .gs-mobile-menu-toggle,
    #gs-mobile-menu-toggle,
    .gs-lines-button,
    .gs-menu-caption {
        display: none !important;
    }
    /* Ensure #nav displays normally in desktop */
    .gs-mobile-panel #nav {
        display: flex !important;
    }
}

/* ==========================================================================
   v18 - Mobile header: match WordPress The7 style
   ========================================================================== */
@media (max-width: 1199px) {
    /* Logo: 24px, no grow on click/hover */
    .gs-main-nav .navbar-brand,
    a.navbar-brand,
    a.navbar-brand:hover,
    a.navbar-brand:focus,
    a.navbar-brand:active {
        font-size: 24px !important;
        padding-left: 15px !important;
        transform: none !important;
        transition: none !important;
    }
    .gs-main-nav > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .navbar-nav.toolbar > li:has(.cart-btn) {
        display: none !important;
    }
    .gs-main-nav,
    .gs-main-nav > .container,
    #header .navbar.navbar-light > .container {
        height: 60px !important;
    }

    /* Hamburger: 3 CSS lines + MENU text */
    .gs-mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-decoration: none !important;
        padding: 8px 15px !important;
        cursor: pointer !important;
        background: none !important;
        border: none !important;
    }
    .gs-lines-button {
        width: 24px !important;
        height: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    .gs-menu-line {
        display: block !important;
        height: 2px !important;
        background: var(--gs-navy) !important;
        border-radius: 1px !important;
        transition: all 0.3s !important;
    }
    .gs-menu-line:nth-child(2) {
        width: 80% !important;
    }
    .gs-menu-caption {
        font-family: "Poppins", sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--gs-navy) !important;
        letter-spacing: 0.5px !important;
    }

    /* Override orange pill on mobile toggle */
    .navbar-nav.toolbar.d-xl-none > .nav-item:last-child > a,
    .navbar-nav.toolbar.ml-auto > .nav-item:last-child > a,
    .navbar-nav.ml-auto > .nav-item:last-child > .gs-mobile-menu-toggle {
        background: none !important;
        color: var(--gs-navy) !important;
        border-radius: 0 !important;
        padding: 8px 15px !important;
        margin-left: 0 !important;
    }
    .navbar-nav.toolbar > li.ml-2 {
        margin-left: 0 !important;
    }

    /* Mobile panel: slide-in from right */
    .gs-mobile-panel {
        position: fixed !important;
        top: 45px !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 300px !important;
        background: #fff !important;
        z-index: 10005 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px 24px 30px !important;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15) !important;
        box-sizing: border-box !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        display: block !important;
    }
    .gs-mobile-panel.gs-open {
        transform: translateX(0) !important;
    }

    /* Overlay */
    .gs-mobile-overlay {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        background: rgba(0,0,0,0.4) !important;
        z-index: 10003 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s, visibility 0.3s !important;
    }
    .gs-mobile-overlay.gs-open {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Close button */
    .gs-mobile-close {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 10px 0 !important;
        margin-bottom: 16px !important;
        float: right !important;
    }
    .gs-mobile-close-caption {
        font-family: "Poppins", sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--gs-navy) !important;
    }
    .gs-close-lines {
        width: 22px !important;
        height: 22px !important;
        position: relative !important;
    }
    .gs-close-line {
        position: absolute !important;
        width: 22px !important;
        height: 2px !important;
        background: var(--gs-navy) !important;
        top: 50% !important;
        left: 0 !important;
    }
    .gs-close-line:first-child { transform: rotate(45deg) !important; }
    .gs-close-line:last-child { transform: rotate(-45deg) !important; }

    /* Nav de marca en el panel movil (clonado de WP para paridad) */
    .gs-mobile-nav { margin:0 !important; padding:8px 0 0 !important; clear:both !important; list-style:none !important; }
    .gs-mobile-nav > li { border-bottom:1px solid rgba(0,0,0,0.06) !important; }
    .gs-mobile-nav > li > a { display:block !important; padding:14px 0 !important; font-size:16px !important; font-weight:500 !important; color:#0A2540 !important; text-decoration:none !important; background:none !important; line-height:24px !important; font-family:"Poppins",sans-serif !important; }
    .gs-mobile-nav > li > a:hover { color:#1091EF !important; }
    .gs-mobile-nav > li.gsm-sep { border-bottom:none !important; padding:18px 0 4px !important; font-family:"Poppins",sans-serif !important; font-size:12px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.06em !important; color:#8a97a6 !important; }
    /* Submenús acordeón (paridad con WP; mantener en sync con el megamenú .gsnav) */
    .gs-mm-top { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; width:100% !important; padding:14px 0 !important; font-size:16px !important; font-weight:500 !important; color:#0A2540 !important; font-family:"Poppins",sans-serif !important; background:none !important; border:0 !important; cursor:pointer !important; text-align:left !important; line-height:24px !important; text-decoration:none !important; }
    .gs-mm-top:hover { color:#1091EF !important; }
    .gs-mm-chev { flex-shrink:0 !important; color:#8595a6 !important; transition:transform .25s ease !important; }
    .gs-mm-has-sub.open > .gs-mm-top { color:#1091EF !important; }
    .gs-mm-has-sub.open > .gs-mm-top .gs-mm-chev { transform:rotate(180deg) !important; }
    .gs-mm-sub { max-height:0 !important; overflow:hidden !important; transition:max-height .3s ease !important; }
    .gs-mm-has-sub.open > .gs-mm-sub { max-height:440px !important; }
    .gs-mm-sub a { display:block !important; padding:11px 0 11px 16px !important; font-size:14.5px !important; font-weight:400 !important; color:#54637a !important; text-decoration:none !important; font-family:"Poppins",sans-serif !important; border-left:2px solid #e6edf3 !important; line-height:1.35 !important; }
    .gs-mm-sub a:last-child { padding-bottom:15px !important; }
    .gs-mm-sub a:hover { color:#1091EF !important; border-left-color:#1091EF !important; }

    /* Nav items */
    .gs-mobile-panel #nav {
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }
    .gs-mobile-panel #nav > li {
        list-style: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    }
    .gs-mobile-panel #nav > li > a,
    .gs-mobile-panel #nav > li > a.pr-4,
    .gs-mobile-panel #nav > li > a.dropdown-toggle,
    .gs-mobile-panel .gs-main-nav #nav > li > a {
        display: block !important;
        padding: 14px 0 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: var(--gs-navy) !important;
        text-decoration: none !important;
        background: none !important;
        line-height: 38px !important;
    }
    .gs-mobile-panel #nav > li > a:hover {
        color: var(--gs-blue) !important;
    }

    /* Dropdown submenus */
    .gs-mobile-panel .dropdown-menu {
        position: static !important;
        float: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 0 8px 16px !important;
        display: none !important;
    }
    .gs-mobile-panel .dropdown.gs-submenu-open .dropdown-menu {
        display: block !important;
    }
    .gs-mobile-panel .dropdown:not(.collapsable-dropdown) .dropdown-menu .dropdown-item,
    .gs-mobile-panel .dropdown:not(.collapsable-dropdown) .dropdown-menu a {
        color: rgba(10,37,64,0.6) !important;
        padding: 10px 0 !important;
        font-size: 14px !important;
        background: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    }
    .gs-mobile-panel .dropdown:not(.collapsable-dropdown) .dropdown-menu a:hover {
        color: var(--gs-blue) !important;
    }
    .gs-mobile-panel .dropdown-divider { display: none !important; }

    /* Hide secondary navbar + Home */
    .gs-mobile-panel .navbar-nav.d-none.d-xl-flex { display: none !important; }
    #Primary_Navbar-Home { display: none !important; }

    /* Expand "Más" dropdown: hide toggle, show items as normal nav items */
    .gs-mobile-panel .collapsable-dropdown > a#navbarDropdownMenu,
    .gs-mobile-panel .collapsable-dropdown > a.dropdown-toggle {
        display: none !important;
    }
    .gs-mobile-panel .collapsable-dropdown {
        border-bottom: none !important;
    }
    .gs-mobile-panel .collapsable-dropdown-menu,
    .gs-mobile-panel .collapsable-dropdown .dropdown-menu {
        position: static !important;
        display: block !important;
        float: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .gs-mobile-panel .collapsable-dropdown-menu > li,
    .gs-mobile-panel .collapsable-dropdown .dropdown-menu > li {
        list-style: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    }
    .gs-mobile-panel .collapsable-dropdown-menu > li,
    .gs-mobile-panel .collapsable-dropdown .dropdown-menu > li {
        padding: 0 !important;
    }
    .gs-mobile-panel .collapsable-dropdown-menu > li > a,
    .gs-mobile-panel .collapsable-dropdown .dropdown-menu > li > a,
    .gs-mobile-panel .collapsable-dropdown .dropdown-menu .dropdown-item > a,
    .gs-mobile-panel .collapsable-dropdown-menu > .dropdown-item > a {
        display: block !important;
        padding: 14px 0 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #0A2540 !important;
        text-decoration: none !important;
        background: none !important;
        line-height: 38px !important;
        border-bottom: none !important;
    }
    .gs-mobile-panel .collapsable-dropdown-menu > li > a:hover,
    .gs-mobile-panel .collapsable-dropdown .dropdown-menu > li > a:hover {
        color: var(--gs-blue) !important;
    }

}

/* Topbar above overlay (same as WP: z-index 10001 > overlay 9999) */
.gs-topbar {
    position: relative !important;
    z-index: 10001 !important;

}

/* Fix: form icons overlapping input text.
   F4B (loop #13): el checkout (goservix_cart) usa .prepend-icon SIN .form-group
   y el padding global de .form-control (10px 14px !important, arriba) dejaba el
   lapicito del campo «nombre para esta tarjeta» ENCIMA de la primera letra del
   placeholder — la «mancha» que cazó José el 10-ago. Mismo fix, selector ampliado. */
.form-group.prepend-icon input.form-control,
.prepend-icon input.form-control,
.prepend-icon input.field {
    padding-left: 42px !important;

}
.form-group.prepend-icon select.form-control {
    padding-left: 42px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.4 !important;

}

/* Fix: intl-tel-input phone field — flag+code overlaps text */
.iti .form-control,
.intl-tel-input .form-control,
.intl-tel-input input#inputPhone,
.iti input#inputPhone,
.intl-tel-input input[type="tel"],
.iti input[type="tel"] {
    padding-left: 90px !important;

}

/* Fix: bootstrap-switch Sí/No too narrow */
.bootstrap-switch {
    min-width: 80px !important;

}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
    min-width: 36px !important;
    padding: 4px 10px !important;

}

/* Fix: all select.form-control vertical centering */
select.form-control {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.4 !important;
    height: auto !important;

}

/* Fix: bootstrap-switch No button visible in grey */
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
    background: #999 !important;
    color: #fff !important;

}

/* ==========================================================================
   Scroll to top button (matching WP The7)
   ========================================================================== */
.gs-scroll-top {
    position: fixed !important;
    right: -45px !important;
    bottom: 10px !important;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(0,0,0,0.2) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    z-index: -1 !important;
    opacity: 0 !important;
    border: none !important;
    border-radius: 0 !important;

}
.gs-scroll-top,
.gs-scroll-top svg {
    transition: 0.4s !important;

}
.gs-scroll-top.on {
    right: 10px !important;
    opacity: 1 !important;
    z-index: 109 !important;

}
.gs-scroll-top:hover {
    background-color: rgba(0,0,0,0.5) !important;

}
.gs-scroll-top svg {
    width: 24px !important;
    fill: #fff !important;
    line-height: 1 !important;

}

/* === Gap 5px between Cuenta and Cart buttons (2026-04-06) === */
.navbar-nav.d-none.d-xl-flex {
  gap: 5px !important;

}

/* ==========================================================================
   Login Form Fixes (2026-04-06)
   ========================================================================== */

/* Input groups: consistent height, integrated prepend/append */
.input-group-merge .input-group-prepend .input-group-text {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  padding: 10px 12px !important;
  color: #999 !important;

}
.input-group-merge .form-control {
  border-left: none !important;
  border-radius: 0 6px 6px 0 !important;
  height: auto !important;

}
.input-group-merge:focus-within .input-group-prepend .input-group-text {
  border-color: var(--gs-blue) !important;

}
.input-group-merge:focus-within .form-control {
  border-color: var(--gs-blue) !important;

}

/* Password append button (eye icon) */
.input-group-merge .input-group-append .btn-reveal-pw {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-left: none !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 10px 12px !important;
  color: #999 !important;

}
.input-group-merge .input-group-append .btn-reveal-pw:hover {
  color: var(--gs-blue) !important;

}
.input-group-merge:focus-within .input-group-append .btn-reveal-pw {
  border-color: var(--gs-blue) !important;

}

/* When input has append, remove its right border-radius */
.input-group-merge .form-control:not(:last-child) {
  border-radius: 0 !important;
  border-right: none !important;

}

/* Login button: full width, larger */
.card.mw-540 #login,
.login-form #login {
  width: 100% !important;
  display: block !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;

}

/* Fix the float-left that constrained button width */
.card.mw-540 .float-left {
  float: none !important;
  width: 100% !important;
  margin-bottom: 12px !important;

}

/* Checkbox row: center it */
.card.mw-540 .text-right {
  text-align: center !important;

}

/* Card footer: cleaner style */
.card.mw-540 .card-footer {
  background: transparent !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  text-align: center !important;
  padding: 16px !important;

}
.card.mw-540 .card-footer small {
  color: var(--gs-text) !important;

}
.card.mw-540 .card-footer a {
  color: var(--gs-blue) !important;
  font-weight: 600 !important;
  font-size: 13px !important;

}

/* Subtitle */
.card.mw-540 .text-muted {
  font-size: 13px !important;

}

/* Labels */
.card.mw-540 .form-control-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gs-heading) !important;

}

/* Forgot password link */
.card.mw-540 a.text-muted {
  font-size: 12px !important;
  color: var(--gs-blue) !important;

}

/* ==========================================================================
   Register Form Fixes (2026-04-07)
   ========================================================================== */

/* Fix: all inputs in register form consistent borderRadius and padding */
.form-group.prepend-icon input.form-control,
.form-group.prepend-icon select.form-control {
  border-radius: 6px !important;
  padding: 10px 14px 10px 42px !important;
  font-size: 13px !important;
  height: auto !important;

}

/* Fix: intl-tel-input overrides (phone field) */
.iti input.form-control,
.intl-tel-input input.form-control {
  border-radius: 6px !important;
  padding: 10px 14px 10px 90px !important;

}

/* Fix: password fields (WHMCS uses different input-group for pw) */
.using-password-strength input[type="password"],
input[name="password"].form-control,
input[name="password2"].form-control {
  border-radius: 6px !important;
  padding: 10px 14px 10px 42px !important;

}

/* Fix: selects same height as inputs */
.form-group.prepend-icon select.form-control {
  padding: 10px 14px 10px 42px !important;
  height: 36px !important;
  line-height: 1.2 !important;

}

/* Fix: Register button - blue, full width, prominent */
form input[type="submit"][value="Registrar"],
form button[type="submit"].btn-primary,
#order-standard_cart input[type="submit"]:not(#hiddenSubmit) {
  background: var(--gs-blue) !important;
  border-color: var(--gs-blue) !important;
  color: #fff !important;
  width: 100% !important;
  display: block !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  max-width: 400px !important;
  margin: 0 auto !important;

}
form input[type="submit"][value="Registrar"]:hover {
  background: var(--gs-blue-hover) !important;
  border-color: var(--gs-blue-hover) !important;

}

/* Fix: "Generar contraseña" button style */
.btn-generate-pw, a.generate-password, .btn.btn-sm.btn-outline-primary {
  border-radius: 6px !important;
  font-size: 12px !important;

}

/* ==========================================================================
   Register Form Fixes v2 - .field class inputs (2026-04-07)
   ========================================================================== */

/* Fix: inputs with .field class (companyname, address2) */
.form-group.prepend-icon input.field,
.form-group.prepend-icon .field {
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 10px 14px 10px 42px !important;
  font-size: 13px !important;
  font-family: "Poppins", sans-serif !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;

}
.form-group.prepend-icon input.field:focus,
.form-group.prepend-icon .field:focus {
  border-color: var(--gs-blue) !important;
  box-shadow: 0 0 0 3px rgba(16,145,239,0.1) !important;
  outline: none !important;

}

/* Fix: selects and passwords need consistent height */
.form-group.prepend-icon select.form-control {
  height: 41.5px !important;

}

/* Fix: password inputs wrapped by password-strength plugin */
.using-password-strength input[type="password"] {
  height: 41.5px !important;

}

/* Fix: .field inputs height to match .form-control (2026-04-07) */
.form-group.prepend-icon input.field {
  height: 41.5px !important;
  line-height: normal !important;

}

/* Fix: sidebar card header title + icon white on navy */
.card-sidebar .card-header h3,
.card-sidebar .card-header .card-title,
.card-sidebar .card-header .h3,
.card-sidebar .card-header i {
  color: #fff !important;

}

/* Logo img responsive */
@media (max-width: 1199px) {
    .navbar-brand img {
        height: 38px !important;
        width: auto !important;
    }
}

/* Wider content area (only body, not header/footer) */
section#main-body > .container {
    max-width: var(--gs-container) !important;
}

/* ==========================================================================
   v13 - Knowledge Base layout fix (2026-04-11)
   The KB category grid is .primary-content > .row containing .col-xl-6 cards.
   Override the v12 nowrap rule so cards wrap normally.
   ========================================================================== */
.primary-content > .row:has(.kb-category),
.primary-content > .row:has(.kb-article-item) {
    flex-wrap: wrap !important;
}

/* KB card: prevent long titles from overflowing the badge */
.kb-category .card-body .h5 {
    display: block !important;
    overflow: hidden !important;
}
.kb-category .card-body .h5 .badge {
    margin-left: 8px !important;
}
.kb-category .card-body p {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* KB article view: make sure content doesn't overflow */
.primary-content .kbarticle-content img,
.primary-content .kbarticle-content table,
.primary-content .kbarticle-content pre {
    max-width: 100% !important;
    height: auto !important;
}

/* Mobile: single column for KB cards */
@media (max-width: 767px) {
    .primary-content > .row:has(.kb-category) > .col-xl-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ==========================================================================
   v14 - KB search bar fix (2026-04-11)
   Restore Bootstrap 4 input-group behaviour: input + button fused, no gap.
   ========================================================================== */
.kb-search {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
}
.kb-search > .form-control {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    margin: 0 !important;
}
.kb-search > .input-group-append {
    display: flex !important;
    margin: 0 !important;
    margin-left: -1px !important;
}
.kb-search > .input-group-append > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
}

/* v14b - unify input/button height in KB search */
.kb-search > .form-control,
.kb-search > .input-group-append > .btn {
    height: 54px !important;
    line-height: 1.5 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 1.05rem !important;
}
.kb-search > .input-group-append > .btn {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* ============================================================
   REDISEÑO 2026 · HEADER NAVY + MEGAMENÚS (WHMCS) — espejo de WP
   ============================================================ */

/* --- WHMCS-específico: header navy --- */
#header, .gs-main-nav { background: var(--gs-navy) !important; }
/* logo del header en blanco e igual que WP (28/800): gana a las reglas legacy .navbar-brand navy/30px */
#header .gs-main-nav .navbar-brand.gs-logo,
#header .gs-main-nav .navbar-brand.gs-logo:hover,
#header .gs-main-nav .navbar-brand.gs-logo:focus {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-size: 28px !important; font-weight: 800 !important; letter-spacing: 0 !important;
}
/* contexto de posicionamiento para centrar el megamenú dentro de la barra 1600 */
.gs-main-nav > .container { position: relative !important; }
/* ocultar el menú nativo de WHMCS (#nav primaryNavbar) en desktop — usamos .gsnav */
@media (min-width: 1200px) {
  .gs-main-nav #nav { display: none !important; }
  .gs-main-nav #gs-mobile-panel { justify-content: flex-end !important; }
}
/* forzar enlaces del nav en blanco (WHMCS pinta los <a> de azul) */
.gs-main-nav .gsnav-lnk { color: #fff !important; }
/* ocultar .gsnav en móvil (sigue funcionando el panel lateral existente) */
@media (max-width: 1199px) {
  .gsnav { display: none !important; }
}

/* ===== GS-CHROME-SHARED START (v20260801a) — nav megamenú · DEBE ser byte-idéntico entre prod-overrides.css (WP) y custom.css (WHMCS) ===== */
/* Nota (1-ago-2026): el text-decoration y el line-height explícitos de aquí abajo son para
   WHMCS, cuyo Bootstrap subraya TODO <a> al pasar el ratón y trae line-height 21px; en
   WordPress ya salían así, por eso el bloque sigue siendo idéntico en los dos sitios. */
.gsnav{display:flex;align-items:stretch;height:75px;gap:2px;margin-left:18px}
.gsnav-has-mega{position:static;display:flex;align-items:center}
.gsnav-lnk{height:75px;color:#fff;font-size:15px;font-weight:500;padding:0 16px;display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;text-decoration:none}
.gsnav-lnk:hover,.gsnav-lnk:focus,.gsnav-has-mega.open .gsnav-lnk{background:rgba(255,255,255,.08);text-decoration:none}
.gsnav-lnk i{font-size:11px;opacity:.7;transition:transform .2s}
.gsnav-has-mega.open .gsnav-lnk i{transform:rotate(180deg)}
.gsnav-mega{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px);width:min(1200px,calc(100% - 32px));box-sizing:border-box;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(10,37,64,.20);padding:30px;z-index:1001;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s}
.gsnav-has-mega.open .gsnav-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.gsnav-cols{display:flex;gap:24px}
.gsnav-col{flex:1;min-width:0}
.gsnav-col h5{font-size:12px;font-weight:600;color:#9d9ea4;text-transform:uppercase;letter-spacing:.3px;padding:0 14px;margin:0 0 4px}
.gsnav-item{display:flex;gap:12px;padding:11px 14px;border-radius:10px;align-items:flex-start;text-decoration:none}
.gsnav-item:hover,.gsnav-item:focus{background:#f4f8fb;text-decoration:none}
.gsnav-item .ic{width:22px;text-align:center;color:var(--gs-blue);font-size:17px;line-height:24px;flex-shrink:0;margin-top:2px}
.gsnav-item .tx b{display:flex;align-items:center;gap:8px;font-size:14.5px;line-height:24px;font-weight:600;color:var(--gs-navy)}
.gsnav-item .tx span{display:block;font-size:12.5px;color:#62707d;line-height:1.45;margin-top:2px}
.gsnav-item:hover .tx b{color:var(--gs-blue)}
.gsnav-item .badge{background:#eafbf0;color:#1f9d57;font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--gs-radius);text-transform:uppercase;letter-spacing:.3px}
.gsnav-item .price{margin-left:auto;font-size:13px;font-weight:700;color:var(--gs-navy)}
/* footer: iconos sociales + métodos de pago */
.gs-footer-social{display:flex;gap:10px;margin-top:18px}
.gs-footer-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;transition:.15s;text-decoration:none}
.gs-footer-social a:hover{background:var(--gs-blue)}
.gs-footer-pay{display:flex;gap:10px;align-items:center}
.gs-footer-pay img.gs-pay-ico{height:28px;width:auto;display:block;border-radius:4px}
.gs-footer-bottom-right{display:flex;align-items:center;gap:16px}
/* logo de marca (rayo + GoServix), igual que la maqueta */
.gs-logo{font-family:'Poppins',sans-serif !important;font-weight:800 !important;font-size:28px !important;line-height:1 !important;color:#fff !important;-webkit-text-fill-color:#fff !important;display:inline-flex !important;align-items:center;gap:9px;text-decoration:none !important;white-space:nowrap}
.gs-logo i{color:var(--gs-blue) !important;-webkit-text-fill-color:var(--gs-blue) !important;font-weight:900}
.gs-footer-logo.gs-logo{font-size:22px !important}
/* ===== GS-CHROME-SHARED END ===== */

/* ====== PRUEBA: HEADER (barra del menú) EN BLANCO — 2026-05-31. Igual que WordPress. ====== */
#header,
#header.header,
#header .gs-main-nav,
nav.gs-main-nav {
  background: #ffffff !important;
}
#header {
  border-bottom: 1px solid rgba(10,37,64,0.08) !important;
  box-shadow: 0 1px 10px rgba(10,37,64,0.07) !important;
}
/* Logo "GoServix" en navy SOLO en el header (el footer no se toca; el rayo sigue azul) */
#header .gs-main-nav .navbar-brand.gs-logo,
#header .gs-main-nav .navbar-brand.gs-logo:hover,
#header .gs-main-nav .navbar-brand.gs-logo:focus {
  color: var(--gs-navy) !important;
  -webkit-text-fill-color: var(--gs-navy) !important;
}
/* Enlaces del menú en navy */
#header .gsnav-lnk {
  color: var(--gs-navy) !important;
}
#header .gsnav-lnk:hover,
#header .gsnav-lnk.gsnav-open {
  color: var(--gs-blue) !important;
}
#header .gsnav-lnk svg,
#header .gsnav-lnk i {
  color: var(--gs-navy) !important;
  fill: var(--gs-navy) !important;
}
/* ====== FIN PRUEBA HEADER BLANCO ====== */

/* Panel movil: oculto en escritorio (>=1200px). Solo visible al abrir la hamburguesa en movil. */
@media (min-width: 1200px) {
  #gs-mobile-panel, .gs-mobile-panel, #gs-mobile-overlay, .gs-mobile-overlay { display: none !important; }
}

/* ===== Cuenta + carrito en la barra principal (paridad con WP) — 2026-06-01 ===== */
.gs-login-dropdown{display:none !important}
.gs-main-nav .container{justify-content:flex-start}
.gs-header-actions{display:flex;align-items:center;gap:5px;margin-left:auto}
.gs-header-dropdown{position:relative}
.gs-header-cuenta-btn{background:#FF7F22;color:#fff;border:0;padding:8px 24px;border-radius:100px;font-weight:500;font-size:14px;font-family:Poppins,sans-serif;height:37px;display:inline-flex;align-items:center;cursor:pointer;white-space:nowrap}
.gs-header-cuenta-btn:hover{background:#E66D10}
.gs-caret{display:inline-block;width:0;height:0;margin-left:6px;border:4px solid transparent;border-top-color:#fff;border-bottom:0}
.gs-header-cart-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#222;border:1px solid rgba(0,0,0,.15);border-radius:100px;padding:10px 14px;height:37px;font-size:15px;text-decoration:none}
.gs-header-cart-btn:hover{border-color:rgba(0,0,0,.3)}
.gs-cart-badge{font-size:11px;color:#222;font-weight:600}
.gs-header-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:262px;background:#fff;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease;z-index:1002}
.gs-header-dropdown.open .gs-header-panel{opacity:1;visibility:visible;transform:translateY(0)}
/* Flechita apuntando al botón, igual que en WordPress (::before el triángulo blanco, ::after su sombra) */
.gs-header-panel::before{content:"";position:absolute;top:-8px;right:20px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #fff}
.gs-header-panel::after{content:"";position:absolute;top:-9px;right:19px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid rgba(0,0,0,.08);z-index:-1}
/* Ítems con las MISMAS medidas y colores que el desplegable de WordPress: 41px de alto y gris
   #545559 (el !important es obligado porque más arriba este mismo archivo pinta TODO <a> de azul). */
.gs-header-item{display:flex;align-items:center;height:41px;padding:5px 16px;color:#545559 !important;font-size:14px;text-decoration:none;line-height:21px;white-space:nowrap}
.gs-header-item:hover,.gs-header-item:focus{background:#F4F4F4;color:#222 !important;text-decoration:none}
.gs-header-divider{height:1px;background:rgba(0,0,0,.06);margin:7px 0}
.gsnav-col h5{color:#9d9ea4 !important}
@media (max-width:1199px){.gs-header-actions{display:none}}

/* ===== Chrome sin subrayados — paridad con la tienda WordPress (1-ago-2026) =====
   El Bootstrap del tema (theme.min.css) subraya TODO <a> al pasar el ratón; en WordPress no
   ocurre, así que el mismo menú se veía distinto en cada sitio. Se apaga por ZONA (barra
   superior, header y pie) en vez de enlace por enlace: así cualquier enlace que añadamos al
   chrome nace ya igual en los dos. El contenido del área de cliente NO se toca — ahí el
   subrayado al pasar el ratón es el comportamiento propio de WHMCS. */
.gs-topbar a:hover,.gs-topbar a:focus,
#header a:hover,#header a:focus,
.gs-footer a:hover,.gs-footer a:focus{text-decoration:none}
/* Al pulsar el botón naranja, Chrome pinta su anillo de foco azul y en WordPress no aparece;
   se conserva solo para quien navega con el teclado. */
.gs-header-cuenta-btn:focus{outline:none}
.gs-header-cuenta-btn:focus-visible{outline:2px solid var(--gs-blue);outline-offset:2px}

/* ===== Campanita de notificaciones (cliente logueado) — 2026-06-01 ===== */
.gs-header-bell{display:inline-flex}
.gs-bell-btn{position:relative;background:transparent;border:0;color:#0A2540;font-size:18px;cursor:pointer;padding:8px;line-height:1;display:inline-flex;align-items:center}
.gs-bell-btn:hover{color:#1091EF}
.gs-bell-badge{position:absolute;top:2px;right:0;background:#FF7F22;color:#fff;font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}
.gs-notif-panel{min-width:300px}
.gs-notif-head{padding:8px 16px;font-weight:600;color:#0A2540;border-bottom:1px solid rgba(0,0,0,.08);font-size:14px}
.gs-notif-list{list-style:none;margin:0;padding:6px 0;max-height:340px;overflow:auto}
.gs-notif-item{display:flex;gap:10px;align-items:flex-start;padding:8px 16px;color:#545559;font-size:13.5px;text-decoration:none;line-height:1.4}
.gs-notif-item:hover{background:#f5f6f8}
.gs-notif-item i{margin-top:2px;color:#1091EF}
.gs-notif-none{padding:14px 16px;color:#9d9ea4;font-size:13.5px;text-align:center}

/* ============================================================
   Resumen del pedido (carrito WHMCS) — rediseño LIGHT/sobrio (2-jul-2026)
   Iguala el lenguaje del configurador. Scope: #order-standard_cart .order-summary
   ============================================================ */
#order-standard_cart .order-summary{
    background:#fff !important;
    border:1px solid #e4e9ef !important;
    border-radius:16px !important;
    box-shadow:0 6px 24px rgba(10,37,64,.07) !important;
    overflow:hidden !important;
}
#order-standard_cart .order-summary h2{
    display:flex !important; align-items:center !important; gap:9px !important;
    margin:0 !important; padding:18px 22px !important;
    color:#0A2540 !important; text-align:left !important;
    font-size:15px !important; font-weight:700 !important;
    background:#fff !important; border-bottom:1px solid #e4e9ef !important;
}
#order-standard_cart .order-summary h2::before{
    content:"" !important; flex:0 0 auto; width:19px; height:19px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E") center/contain no-repeat;
}
#order-standard_cart .summary-container{
    background:#fff !important; padding:20px 22px !important;
    font-size:13px !important; color:#0A2540 !important; min-height:0 !important;
}
#order-standard_cart .order-summary .product-name{ font-size:15px !important; color:#0A2540 !important; }
#order-standard_cart .order-summary .product-group{ font-style:normal !important; color:#5b6b7b !important; font-size:11.5px !important; margin:1px 0 10px !important; }
#order-standard_cart .summary-container > .clearfix{ padding:8px 0 !important; border-bottom:1px solid #eef2f6 !important; }
#order-standard_cart .order-summary .summary-totals{
    margin:10px 0 0 !important; padding:12px 0 0 !important;
    border-top:1px solid #e4e9ef !important; border-bottom:0 !important;
    color:#5b6b7b !important; font-size:12.5px !important;
}
#order-standard_cart .order-summary .summary-totals .clearfix{ padding:3px 0 !important; border:0 !important; }
#order-standard_cart .order-summary .total-due-today{
    margin:14px 0 0 !important; padding:14px 0 0 !important; border-top:1px solid #e4e9ef !important;
    display:flex !important; justify-content:space-between !important; align-items:baseline !important; flex-direction:row-reverse !important;
}
#order-standard_cart .order-summary .total-due-today span{ text-align:left !important; display:inline !important; }
#order-standard_cart .order-summary .total-due-today > span:last-child{ font-weight:700 !important; font-size:15px !important; color:#0A2540 !important; }
#order-standard_cart .order-summary .total-due-today .amt{ font-size:30px !important; font-weight:800 !important; color:#0A2540 !important; letter-spacing:-.5px !important; }
#order-standard_cart .order-summary .express-checkout-buttons{ margin:0 22px !important; }
#order-standard_cart .order-summary .text-right{ text-align:left !important; }
#order-standard_cart .order-summary .btn-checkout{
    display:block !important; margin:18px 22px 0 !important; width:auto !important;
    border-radius:12px !important; box-shadow:0 2px 8px rgba(255,127,34,.22) !important;
}
#order-standard_cart .order-summary .btn-continue-shopping{ display:block !important; text-align:center !important; margin:10px 22px 0 !important; }
#order-standard_cart .order-summary .gs-cart-trust{
    margin:14px 22px 20px !important; padding-top:16px !important; border-top:1px solid #e4e9ef !important;
    display:grid !important; gap:11px !important;
}
#order-standard_cart .order-summary .gs-cart-trust div{ display:flex !important; align-items:center !important; gap:10px !important; font-size:12px !important; color:#3f5060 !important; }
#order-standard_cart .order-summary .gs-cart-trust svg{ flex:0 0 auto; width:18px; height:18px; stroke:#0A2540; opacity:.78; }

/* ============================================================
   Tienda: tarjetas de plan estilo HOME (.mk-plan) — 2-jul-2026
   Scope: #order-standard_cart (página de productos del order form)
   ============================================================ */
#order-standard_cart .mk-plans-grid{display:flex;justify-content:center;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-top:10px}
#order-standard_cart .mk-plan{position:relative;width:360px;max-width:100%;background:#fff;border:1px solid #e6edf3;border-radius:18px;padding:36px 30px;display:flex;flex-direction:column;box-shadow:none;color:#3d4b59}
#order-standard_cart .mk-plan .disc{position:absolute;top:26px;right:26px;background:rgba(255,127,34,.14);color:#d9650f;font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px}
#order-standard_cart .mk-plan h3{font-size:21px;font-weight:700;margin:0 0 6px;color:#0A2540}
#order-standard_cart .mk-plan .pdesc{font-size:13px;color:#62707d;margin:0 0 20px;min-height:36px;max-width:235px}
#order-standard_cart .mk-plan .price-old{font-size:16px;color:#9aa7b4;text-decoration:line-through;line-height:1}
#order-standard_cart .mk-plan .price{font-size:42px;font-weight:800;color:#0A2540;line-height:1.05;margin-top:4px}
#order-standard_cart .mk-plan .price small{font-size:15px;font-weight:500;color:#62707d}
#order-standard_cart .mk-plan .price-extra{font-size:13.5px;color:#1f9d57;font-weight:600;margin-top:10px}
#order-standard_cart .mk-plan .price-extra i{margin-right:5px}
#order-standard_cart .mk-plan .cta{display:block;text-align:center;padding:14px;border-radius:100px;font-weight:600;font-size:15px;transition:.15s;margin-top:24px;text-decoration:none;background:#FF7F22;color:#fff;border:0}
#order-standard_cart .mk-plan .cta:hover{background:#E66D10;color:#fff}
#order-standard_cart .mk-plan .renew{font-size:12px;color:#8895a2;text-align:center;margin-top:12px;line-height:1.45}
#order-standard_cart .mk-plan .sep{border:0;border-top:1px solid #e9eef3;margin:22px 0}
#order-standard_cart .mk-plan ul{list-style:none;margin:0;padding:0}
#order-standard_cart .mk-plan li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:14px;color:#3d4b59}
#order-standard_cart .mk-plan li i:not(.fa-check){color:#1091ef}#order-standard_cart .mk-plan li i{color:#1f9d57;font-size:13px;margin-top:4px;flex-shrink:0}
#order-standard_cart .mk-plan .feature-value{font-weight:600}

/* === Fix iconos FontAwesome en <span> (barra del editor markdown de tickets): la regla global span{font-family:Poppins!important} los rompia. 2026-07-04 === */
.fa,.fas,.fa-solid,.far,.fa-regular,.fal,.fa-light{font-family:"Font Awesome 6 Pro"!important}
.fab,.fa-brands{font-family:"Font Awesome 6 Brands"!important}
.fad,.fa-duotone{font-family:"Font Awesome 6 Duotone"!important}

/* ===== Carrito header: igualar a WP (icono/numero #222, fondo transparente) + botones a 15px del borde (2026-07-05) ===== */
.gs-header-cart-btn{color:#222 !important;background:transparent !important;}
.gs-header-cart-btn i,.gs-header-cart-btn .gs-cart-badge{color:#222 !important;}
.gs-main-nav > .container{padding-right:15px !important;}

/* ==========================================================================
   BOTONES SOBRIOS estilo twenty-one — DEFINITIVO (decisión José 24-jul-2026).
   Fix 24-jul: color de texto explícito en botones-enlace (a.btn heredaba el
   azul de enlace del tema — p.ej. "Actualizar" verde con texto azul).
   ========================================================================== */
.btn-primary, .btn-primary:focus {
  background: #336699 !important; border-color: #336699 !important;
  border-radius: .25rem !important; font-weight: 400 !important;
}
.btn-primary:hover, .btn-primary:active {
  background: #29537c !important; border-color: #264d73 !important;
}
.btn-success { background: #28a745 !important; border-color: #28a745 !important; }
.btn-outline-primary, .btn-default {
  background: #fff !important; border-color: #ccc !important; color: #333 !important;
  border-radius: .25rem !important; font-weight: 400 !important;
}
.btn-outline-primary:hover, .btn-default:hover {
  background: #f8f9fa !important; color: #333 !important; border-color: #ccc !important;
}
form button[type="submit"].btn-primary {
  width: auto !important; display: inline-block !important;
  padding: 6px 12px !important; font-size: 14px !important; font-weight: 400 !important;
  border-radius: .25rem !important; max-width: none !important; margin: 0 !important;
  background: #336699 !important; border-color: #336699 !important;
}
form button[type="submit"].btn-primary:hover {
  background: #29537c !important; border-color: #264d73 !important;
}
/* Icono pantalla completa del editor Markdown: gris original twenty-one */
.md-controls .md-control, .md-controls .md-control:focus { color: #bebebe !important; }
.md-controls .md-control:hover { color: #333 !important; }
/* Botones de color: texto SIEMPRE blanco aunque sean enlaces <a> (el color de
   anchor del tema ganaba y dejaba texto azul sobre verde/azul/rojo) */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-info, .btn-info:hover, .btn-info:focus,
a.btn-primary, a.btn-success, a.btn-danger, a.btn-info {
  color: #fff !important;
}
/* Chips/badges enlazados (p.ej. categorías del buscador de dominios): al ser
   <a> heredaban el azul de enlace sobre su fondo de color */
a.badge, .badge-primary, .badge-secondary, .badge-success, .badge-danger,
.badge-info, .badge-dark {
  color: #fff !important;
}
.badge-warning, .badge-light, a.badge-warning, a.badge-light { color: #212529 !important; }
/* Botón warning (fondo amarillo): texto oscuro, como twenty-one */
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active,
a.btn-warning { color: #212529 !important; }
/* Botón "Acceder a mi web con IA" del detalle del servicio: en móvil colgaba
   de #main-body a sangre (sin márgenes laterales) */
#gs-webgen-btn {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 14px 0 4px !important;
}
/* Ficha del producto (área cliente) en móvil: pares etiqueta-valor
   alineados a la IZQUIERDA (más formal y escaneable que el centrado del
   template; decisión José 24-jul). La cabecera del producto no se toca. */
/* Pares dato-valor del overview (Fecha de registro, importes…): también a
   la izquierda, en todos los tamaños; la cabecera del producto sigue centrada */
.product-details .row .col-md-6.text-center { text-align: left !important; }
@media (max-width: 575px) {
  .product-details-tab-container .tab-pane { text-align: left !important; }
  .product-details-tab-container .row .col-sm-5.text-right,
  .product-details-tab-container .row .col-sm-7.text-left {
    text-align: left !important;
  }
  .product-details-tab-container .row .col-sm-5.text-right strong {
    display: inline-block;
    margin-top: 8px;
  }
}
/* Badge de estado de servicios: el tema fija el label a 3rem en móvil y
   truncaba "Activo" a "Acti…" — ancho al contenido (el contenedor ya se
   dimensiona por JS con el estado más largo, todo cabe) */
.div-service-status .label:not(.label-placeholder) { width: auto !important; max-width: 100%; }
/* Tarjeta del producto: la banda de estado ARRIBA (decisión José 24-jul) y el
   círculo del icono en navy de marca en vez de negro */
.product-status { display: flex; flex-direction: column; overflow: hidden; }
.product-status .product-status-text { order: -1; }
.product-icon .fa-stack .fa-circle { color: #0b1e3a; }
/* Icono de la tarjeta del producto: círculo navy con SVG Lucide (trazo fino) */
.gs-prod-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 78px; height: 78px; border-radius: 50%;
  background: #0b1e3a; color: #fff; margin-bottom: 6px;
}
/* Tarjeta del Creador de Webs IA: avatar animado del asistente (fondo claro,
   el trazo azul no contrasta sobre navy) */
.gs-prod-icon--gif { background: transparent; border: none; width: 160px; height: 160px; margin-bottom: 0; }
.gs-prod-icon--gif .gs-prod-gif { width: 160px; height: 160px; display: block; }
/* Carrito escritorio: reequilibrio de columnas (José 24-jul) — la izquierda
   respiraba poco (280px) y el resumen se llevaba de más (462px); la central
   GANA el ancho liberado */
@media (min-width: 992px) {
  .cart-sidebar {
    flex: 0 0 320px !important; width: 320px !important; max-width: 320px !important;
  }
  .cart-body {
    flex: 1 1 auto !important; width: auto !important; max-width: calc(100% - 320px) !important;
  }
  .secondary-cart-sidebar {
    flex: 0 0 380px !important; width: 380px !important; max-width: 380px !important;
  }
}
/* ===== Banner del buscador de dominios estilo hero de la home (José 24-jul):
   navy con constelación interactiva + caja pill blanca + botón naranja.
   Solo se re-viste (los IDs/clases del AJAX del buscador NO se tocan) ===== */
/* el contenedor padre pintaba el amarillo antiguo y asomaba por las esquinas */
.domain-checker-container { background: transparent !important; background-image: none !important; }
.domain-checker-bg {
  position: relative;
  background: radial-gradient(120% 120% at 80% 0%, #103a63 0%, var(--gs-navy) 55%, #06192e 100%) !important;
  background-image: none;
  border: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  padding: 40px 28px 84px !important;
}
.gs-dom-eyebrow-wrap {
  position: relative; z-index: 1; text-align: left;
  margin: 0 0 56px;
}
.gs-dom-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(86, 214, 138, .14);
  border: 1px solid rgba(86, 214, 138, .45);
  color: #56d68a; font-size: 13px; font-weight: 600;
  padding: 6px 16px; border-radius: var(--gs-radius);
}
.domain-checker-bg .gs-dom-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.domain-checker-bg form { position: relative; z-index: 1; }
/* la caja ocupa hasta 1000px como en la home (el grid la dejaba en 786px) */
.domain-checker-bg form .row > [class*="col-"] {
  flex: 0 0 100%; max-width: min(1000px, 94%); width: 100%; margin: 0 auto;
}
.domain-checker-bg .input-group-box {
  display: flex !important;
  align-items: center;
  background: #fff !important;
  border-radius: var(--gs-radius) !important;
  padding: 8px 8px 8px 24px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  border: 0 !important;
}
.domain-checker-bg .input-group-box::before {
  content: "";
  width: 18px; height: 18px; margin-right: 12px; flex: 0 0 18px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239aa7b4" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>') center/contain no-repeat;
}
.domain-checker-bg .input-group-box input.form-control {
  flex: 1; border: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: transparent !important; font-size: 17px !important; color: var(--gs-navy) !important;
  height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
}
.domain-checker-bg .input-group-btn { background: transparent; }
.domain-checker-bg form button[type="submit"].domain-check-availability {
  background: var(--gs-orange) !important; border: 0 !important; color: #fff !important;
  font-weight: 600 !important; font-size: 16px !important;
  padding: 14px 34px !important; border-radius: var(--gs-radius) !important;
  line-height: normal !important; height: auto !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.domain-checker-bg form button[type="submit"].domain-check-availability:hover { background: var(--gs-orange-hover) !important; }
@media (max-width: 767px) {
  .domain-checker-bg { padding: 34px 14px 40px !important; }
  .gs-dom-eyebrow-wrap { margin-bottom: 16px; }
  .gs-dom-eyebrow { font-size: 12px; padding: 5px 12px; }
  .domain-checker-bg .input-group-box { flex-wrap: wrap; border-radius: 16px !important; padding: 10px; }
  .domain-checker-bg .input-group-box::before { display: none; }
  .domain-checker-bg .input-group-box input.form-control {
    flex: 1 1 100% !important; background: #f4f6f8 !important; border-radius: 10px !important;
    padding: 13px 14px !important; font-size: 16px !important;
  }
  .domain-checker-bg .input-group-btn { width: 100%; margin-top: 8px; display: block; }
  .domain-checker-bg form button[type="submit"].domain-check-availability { width: 100% !important; display: block !important; }
}
/* La rotación del chevron exigía ancestro .sidebar (área cliente); en el
   carrito los paneles cuelgan de .cart-sidebar → la flechita no giraba */
.cart-sidebar .card-sidebar .card-minimise {
  cursor: pointer;
  transition: transform 200ms ease;
}
.cart-sidebar .card-sidebar .card-minimise.minimised {
  transform: rotate(180deg);
}

/* ── Modal "Generar contraseña" (25-jul-2026): centrado + estilo marca ── */
#modalGeneratePassword{background:rgba(10,37,64,.55)}
#modalGeneratePassword .modal-dialog{display:flex;align-items:center;min-height:calc(100% - 3.5rem);margin:1.75rem auto;max-width:620px}
#modalGeneratePassword .modal-content{border:0;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;width:100%}
#modalGeneratePassword .modal-header{background:#0a2540 !important;padding:14px 20px;border:0;align-items:center}
#modalGeneratePassword .modal-title{font-size:17px !important;font-weight:600 !important;color:#fff !important}
#modalGeneratePassword .modal-header .close{color:#fff;opacity:.8;text-shadow:none}
#modalGeneratePassword .modal-header .close:hover{opacity:1}
#modalGeneratePassword .modal-body{padding:22px 24px}
#modalGeneratePassword .form-control{border-radius:6px}
#modalGeneratePassword .modal-footer{border-top:1px solid #eef2f7;padding:14px 20px}
#modalGeneratePassword .btn{border-radius:8px}
#modalGeneratePassword .modal-footer .btn-primary{background:#1091ef;border-color:#1091ef;font-weight:600;padding:9px 18px}
#modalGeneratePassword .modal-footer .btn-primary:hover{background:#0d7fd6;border-color:#0d7fd6}
/* ==========================================================================
   GS HOME PANELS — MINIMAL AIREADO (25-jul-2026, revisión con José)
   Área de cliente: tiles de stats + cards centrales (.client-home-cards).
   El sidebar izquierdo NO se toca a propósito (José 25-jul).
   ========================================================================== */

/* ---- Tiles de stats: tarjeta blanca plana, icono en chip, sin barra de color ---- */
.tiles .tile {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 20px 22px !important;
  position: relative;
  display: block;
  transition: border-color .15s ease;
}
.tiles .tile:hover { border-color: #b9d9f5 !important; text-decoration: none; }
.tiles .tile i {
  position: absolute; top: 10px; right: 20px;
  font-size: 55px !important;
  line-height: 1;
  color: #ccc !important;
  background: none;
  transition: all .3s ease;
  opacity: 1 !important;
}
.tiles .tile:hover i { font-size: 70px !important; color: #aaa !important; }
.tiles .tile .stat {
  font-size: 46px !important;
  font-weight: 400 !important;
  color: var(--gs-navy, #0A2540) !important;
  line-height: 1.1;
}
.tiles .tile .title {
  font-size: 12px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b !important;
  margin-top: 2px;
}
.tiles .tile .highlight { display: none !important; }

/* ---- Cards centrales: planas, borde fino, cabecera limpia ---- */
.client-home-cards .card {
  border: 1px solid #e2e8f0 !important;
  border-top: 1px solid #e2e8f0 !important; /* mata el acento de color superior */
  border-radius: 12px !important;
  box-shadow: none !important;
}
.client-home-cards .card .card-header {
  background: #fff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 15px 20px !important;
  border-radius: 12px 12px 0 0 !important;
}
.client-home-cards .card .card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #475569 !important;
}
.client-home-cards .card .card-title > i { color: #64748b !important; font-size: 17px !important; vertical-align: -1px; }

/* Botón de cabecera (Mis servicios / Abrir ticket / Ver todo): chip azul suave */
.client-home-cards .card .card-header .btn {
  background: #EAF4FE !important;
  border: none !important;
  color: var(--gs-blue, #1091EF) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.client-home-cards .card .card-header .btn:hover { background: #d8ebfd !important; }

/* Listas internas (noticias, servicios, tickets): separadores suaves */
.client-home-cards .card .list-group-item {
  border: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 13px 20px !important;
}
.client-home-cards .card .list-group-item:last-child { border-bottom: 0 !important; }
.client-home-cards .card .card-footer {
  background: #fff !important;
  border-top: 1px solid #f1f5f9 !important;
  border-radius: 0 0 12px 12px !important;
}
.client-home-cards .card .card-footer:empty { display: none !important; }

/* ---- Buscador "Registrar un nuevo dominio": alineado y proporcionado ---- */
.client-home-cards form[action="domainchecker.php"] .input-group {
  display: flex !important;
  gap: 8px;
  padding: 6px 10px 10px !important;
  margin: 0 !important;
}
.client-home-cards form[action="domainchecker.php"] .form-control {
  height: 42px !important;
  flex: 1 1 auto;
  padding: 8px 14px !important;
  font-size: 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
}
.client-home-cards form[action="domainchecker.php"] .form-control:focus {
  border-color: var(--gs-blue, #1091EF) !important;
  box-shadow: none !important;
}
.client-home-cards form[action="domainchecker.php"] .input-group-append {
  display: flex !important;
  gap: 8px;
}
.client-home-cards form[action="domainchecker.php"] .btn {
  height: 42px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  margin: 0 !important;
}
/* Registrar en VERDE (mismo verde que el botón Actualizar del sidebar) */
.client-home-cards form[action="domainchecker.php"] .btn-success {
  background: #28a745 !important;
  border-color: #28a745 !important;
  color: #fff !important;
}
.client-home-cards form[action="domainchecker.php"] .btn-success:hover {
  background: #218838 !important;
  border-color: #218838 !important;
}
.client-home-cards form[action="domainchecker.php"] .btn-default {
  background: var(--gs-blue, #1091EF) !important;
  border: 1px solid var(--gs-blue, #1091EF) !important;
  color: #fff !important;
}
.client-home-cards form[action="domainchecker.php"] .btn-default:hover {
  background: #0d7fd6 !important;
  border-color: #0d7fd6 !important;
}
/* ===== GS HOME PANELS MINIMAL END ===== */

/* GS HOME PANELS — remates 25-jul: footers vacíos fuera + buscador apilado en móvil */
.client-home-cards .card .card-footer:not(:has(*)) { display: none !important; }
@media (max-width: 575.98px) {
  .client-home-cards form[action="domainchecker.php"] .input-group { flex-wrap: wrap; }
  .client-home-cards form[action="domainchecker.php"] .form-control { flex: 1 1 100%; }
  .client-home-cards form[action="domainchecker.php"] .input-group-append { width: 100%; }
  .client-home-cards form[action="domainchecker.php"] .input-group-append .btn { flex: 1; }
}

/* GS HOME PANELS — título del servicio más grande y menos grueso (José 25-jul) */
.client-home-cards .div-service-name .font-weight-bold {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* GS HOME PANELS — canal entre columnas de panels 30->16px (José 25-jul) */
.client-home-cards .row { margin-left: -5px !important; margin-right: -5px !important; }
.client-home-cards .row > [class*="col-"] { padding-left: 5px !important; padding-right: 5px !important; }

/* ==========================================================================
   GS CART MINIMAL — zona central "Revisar y pagar" (José 25-jul-2026)
   Mismo lenguaje que el home del cliente. OJO: jamás tocar display de .row
   aquí (gotcha campos tarjeta checkout).
   ========================================================================== */
#order-standard_cart .view-cart-items-header {
  background: #fff !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 15px 20px !important;
  border: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 12px 12px 0 0 !important;
}
#order-standard_cart .view-cart-items {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  padding: 20px !important;
  margin-bottom: 4px;
}
/* Bloque "Aplicar código promocional" como tarjeta */
#order-standard_cart .view-cart-tabs { margin-top: 20px; }
#order-standard_cart .view-cart-tabs .nav-tabs {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 12px 12px 0 0;
  padding: 0 !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
  border: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 15px 20px !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  padding: 16px 16px 12px !important;
}
#order-standard_cart #applyPromo .form-control {
  height: 42px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  padding: 8px 14px 8px 42px !important;
}
#order-standard_cart #applyPromo .form-control:focus {
  border-color: var(--gs-blue, #1091EF) !important;
  box-shadow: none !important;
}
#order-standard_cart #applyPromo .btn {
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: var(--gs-blue, #1091EF) !important;
  border: 1px solid var(--gs-blue, #1091EF) !important;
  color: #fff !important;
}
#order-standard_cart #applyPromo .btn:hover {
  background: #0d7fd6 !important;
  border-color: #0d7fd6 !important;
}
/* ===== GS CART MINIMAL END ===== */

/* ==========================================================================
   GS DOMAIN SELECT MINIMAL — "Seleccione un dominio" del carrito (José 25-jul)
   Radios iCheck NO se tocan (gotcha doble-cuadrado del checkout).
   ========================================================================== */
#order-standard_cart .domain-selection-options .option {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  margin-bottom: 10px !important;
}
#order-standard_cart .domain-selection-options .option:has(.iradio_square-blue.checked) {
  border-color: #b9d9f5 !important;
  background: #f8fbff !important;
}
#order-standard_cart .domain-selection-options .input-group-text {
  height: 42px !important;
  display: flex; align-items: center;
  border: 1px solid #e2e8f0 !important;
  border-right: 0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 14px !important;
}
#order-standard_cart .domain-selection-options .input-group .form-control {
  height: 42px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 14px !important;
}
#order-standard_cart .domain-selection-options .input-group .form-control:focus {
  border-color: var(--gs-blue, #1091EF) !important;
  box-shadow: none !important;
}
#order-standard_cart .domain-selection-options select {
  height: 42px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}
#order-standard_cart .domain-selection-options #btnCheckAvailability {
  height: 42px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: var(--gs-blue, #1091EF) !important;
  border: 1px solid var(--gs-blue, #1091EF) !important;
  color: #fff !important;
}
#order-standard_cart .domain-selection-options #btnCheckAvailability:hover {
  background: #0d7fd6 !important;
  border-color: #0d7fd6 !important;
}
#order-standard_cart #btnDomainContinue {
  height: 44px !important;
  padding: 0 26px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: var(--gs-blue, #1091EF) !important;
  border: 1px solid var(--gs-blue, #1091EF) !important;
  color: #fff !important;
}
#order-standard_cart #btnDomainContinue:hover {
  background: #0d7fd6 !important;
  border-color: #0d7fd6 !important;
}
/* ===== GS DOMAIN SELECT MINIMAL END ===== */

/* ==========================================================================
   GS CONFIGURE PRODUCT MINIMAL — pantalla "Configurar" del carrito (25-jul)
   Checkboxes iCheck NO se tocan.
   ========================================================================== */
#order-standard_cart .product-info {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
}
#order-standard_cart .product-info .product-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--gs-navy, #0A2540) !important;
  margin-bottom: 8px !important;
}
#order-standard_cart #inputBillingcycle {
  height: 42px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}
#order-standard_cart .sub-heading span {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #475569 !important;
}
#order-standard_cart .alert-warning.info-text-sm {
  background: #FFF8E6 !important;
  border: 1px solid #F5E3B3 !important;
  border-radius: 10px !important;
  color: #7a5c12 !important;
}
/* ===== GS CONFIGURE PRODUCT MINIMAL END ===== */

/* GS CONFIGURE PRODUCT — opciones configurables como mini-tarjetas (25-jul) */
#order-standard_cart #productConfigurableOptions .form-group {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 10px !important;
}
#order-standard_cart #productConfigurableOptions .form-group > label:first-child {
  display: block;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #64748b !important;
  margin-bottom: 8px !important;
}
#order-standard_cart #productConfigurableOptions .form-group label:not(:first-child) {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #334155 !important;
}
#order-standard_cart #productConfigurableOptions .form-group > br { display: none; }
#order-standard_cart #productConfigurableOptions select.form-control,
#order-standard_cart #productConfigurableOptions input.form-control {
  height: 42px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}
#order-standard_cart #productConfigurableOptions .form-group:has(.icheckbox_square-blue.checked),
#order-standard_cart #productConfigurableOptions .form-group:has(.iradio_square-blue.checked) {
  border-color: #b9d9f5 !important;
  background: #f8fbff !important;
}
/* ===== GS CONFIG OPTIONS END ===== */

/* ==========================================================================
   GS DOMAIN ADDONS MINIMAL — tarjetas addon del carrito (25-jul)
   (configuredomains + addons de configureproduct: mismas clases)
   ========================================================================== */
#order-standard_cart .panel-addon {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#order-standard_cart .panel-addon .panel-body {
  padding: 16px 18px !important;
  font-size: 13px !important;
  color: #475569 !important;
}
#order-standard_cart .panel-addon .panel-body label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gs-navy, #0A2540) !important;
}
#order-standard_cart .panel-addon .panel-price {
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
#order-standard_cart .panel-addon .panel-add {
  background: #EAF4FE !important;
  color: var(--gs-blue, #1091EF) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-top: 1px solid #d8ebfd !important;
  transition: background .15s ease;
}
#order-standard_cart .panel-addon .panel-add:hover { background: #d8ebfd !important; }
#order-standard_cart .panel-addon-selected {
  border-color: #b9d9f5 !important;
  background: #f8fbff !important;
}
#order-standard_cart .panel-addon-selected .panel-add {
  background: var(--gs-blue, #1091EF) !important;
  color: #fff !important;
  border-top-color: var(--gs-blue, #1091EF) !important;
}
/* ===== GS DOMAIN ADDONS MINIMAL END ===== */

/* ==========================================================================
   GS CART v2 — vaciar carrito + promo compacto + modales de confirmación (25-jul)
   ========================================================================== */
/* Botón "Vaciar carrito": destructivo discreto */
#order-standard_cart #btnEmptyCart {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}
#order-standard_cart #btnEmptyCart:hover {
  border-color: #fecaca !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
}
/* Promo: input y botón en una fila; botón compacto VERDE */
#order-standard_cart #applyPromo form {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
#order-standard_cart #applyPromo form .form-group {
  flex: 1 1 auto;
  margin-bottom: 0 !important;
}
#order-standard_cart #applyPromo .btn {
  width: auto !important;
  flex: 0 0 auto;
  height: 42px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
  background: #E4F5EA !important;
  border: 1px solid #bfe6cd !important;
  color: #1e9e54 !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#order-standard_cart #applyPromo .btn:hover {
  background: #4db670 !important;
  border-color: #4db670 !important;
  color: #fff !important;
}
/* Modales de confirmación del carrito (vaciar / quitar item): centrados + minimal */
.modal-remove-item .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 60px);
  max-width: 440px;
  margin: 30px auto !important;
  padding-bottom: 16vh;
}
.modal-remove-item .modal-content {
  width: 100%;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(10, 37, 64, .18) !important;
}
.modal-remove-item .modal-body {
  padding: 26px 28px 24px !important;
  text-align: center;
}
.modal-remove-item .modal-title {
  color: var(--gs-navy, #0A2540) !important;
  font-weight: 600 !important;
}
.modal-remove-item .modal-title .fas {
  display: block;
  margin: 0 auto 12px;
  color: #e15b5b !important;
  opacity: .9;
}
.modal-remove-item .modal-content .btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 9px 24px !important;
  min-width: 92px !important;
}
.modal-remove-item .modal-content .close {
  font-size: 22px !important;
  color: #94a3b8 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.modal-remove-item .modal-content .close:hover { color: #475569 !important; }
/* la X estaba TAPADA por el h4 del título (área de bloque) → por encima y clicable */
.modal-remove-item .modal-body .float-right {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 5;
}
.modal-remove-item .modal-content .close { padding: 4px 8px !important; cursor: pointer; }
.modal-remove-item .btn[data-dismiss] {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}
.modal-remove-item .btn[data-dismiss]:hover { border-color: #cbd5e1 !important; }
.modal-remove-item .btn[type="submit"], .modal-remove-item .btn-primary {
  background: #e15b5b !important;
  border: 1px solid #e15b5b !important;
  color: #fff !important;
}
.modal-remove-item .btn[type="submit"]:hover, .modal-remove-item .btn-primary:hover {
  background: #cf4a4a !important;
  border-color: #cf4a4a !important;
}
/* ===== GS CART v2 END ===== */

/* GS CART v3c — "Vaciar carrito" arriba-dcha SOLO ICONO (25-jul, decisión José) */
@media (min-width: 768px) {
  #order-standard_cart form:has(.view-cart-items-header) { position: relative; }
  #order-standard_cart .empty-cart {
    position: absolute;
    top: 7px;
    right: 14px;
    margin: 0 !important;
    z-index: 2;
  }
  #order-standard_cart #btnEmptyCart { padding: 6px 10px !important; }
  #order-standard_cart #btnEmptyCart span { display: none; }
  #order-standard_cart #btnEmptyCart .fa-trash-alt { font-size: 13px !important; }
}
/* ===== GS CART v3c END ===== */

.gsnav-item .price .iva{font-style:normal;font-weight:500;font-size:11.5px;color:#8895a2;margin-left:2px}

/* Total con IVA bajo el precio de catalogo (paridad con la home, 30-jul-2026) */
.mk-plan .price-iva{font-size:13px;color:#7a8794;line-height:1.2;margin-top:5px}
.gs-iva-aviso{font-size:13.5px;color:#7a8794;margin-top:-6px}

/* Loop #14 (21-ago-2026) · buscador de dominios: aviso «sin comprobar» (status unknown del lookup) */
#order-standard_cart .gs-domain-unknown{display:block;color:#6b4f00;background:#fff7e0;border:1px solid #f0d98a;border-radius:8px;padding:12px 16px;margin:8px 0 6px;font-weight:600;line-height:1.45;text-align:left}
#order-standard_cart .gs-domain-unknown .gs-du-body{display:block;font-weight:400;font-size:.93em;margin-top:4px;color:#6b5a2e}
#order-standard_cart .domain-lookup-result button.unavailable.gs-unknown,#order-standard_cart #domainSuggestions span.unavailable.gs-unknown{opacity:.9}

/* ===== Menú de cuenta en DOS COLUMNAS (21-ago-2026) — mismas 13 opciones que el menú nativo de
   WHMCS 9, agrupadas (Servicios | Cuenta) para que el desplegable no sea una columna kilométrica.
   Idéntico en WordPress (prod-overrides.css). En pantallas estrechas vuelve a una columna. */
.gs-menu-cols{display:flex;gap:4px}
.gs-menu-col{flex:0 0 auto;min-width:0}
.gs-menu-head{padding:6px 16px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9d9ea4}
@media (max-width:576px){.gs-menu-cols{flex-direction:column}}
/* Menú de cuenta: filas más compactas (34px), cabeceras algo mayores e icono de trazo fino (21-ago-2026, petición de José) */
#gs-header-cuenta-panel .gs-header-item{height:34px;padding:0 14px;font-size:13.5px;line-height:20px}
#gs-header-cuenta-panel .gs-menu-head{font-size:13px;letter-spacing:.05em;color:#6b6c72;padding:8px 14px 4px}
.gs-mi{width:18px;height:18px;flex:0 0 18px;margin-right:10px;color:#6b6c72;vertical-align:middle}
#gs-header-cuenta-panel .gs-header-item:hover .gs-mi{color:#222}
/* «Cerrar sesión» abajo a la DERECHA del desplegable de cuenta (21-ago-2026) */
#gs-header-cuenta-panel a.gs-header-item[href*="gs_salir.php"]{justify-content:flex-end}
#gs-header-cuenta-panel .gs-menu-head{line-height:20px}
/* (21-ago-2026) Un poco más de aire entre columnas y a los lados (igual en WordPress) */
#gs-header-cuenta-panel .gs-menu-cols{gap:24px;padding:0 8px}

/* ── Botón oculto de Stripe (26-ago-2026) ──────────────────────────────
   El módulo Stripe legacy inyecta al vuelo, para reenviar el formulario
   tras el 3DS:
     <input type="submit" id="hiddenSubmit" name="submit"
            value="Save Changes" style="display:none;">
   Nace oculto con estilo INLINE, y cualquier `display: ... !important`
   que lo alcance lo saca a la luz: salía un botón azul «Save Changes»
   en mitad del pago. Si lo pulsa el cliente, reenvía el checkout.
   No quitar sin comprobar el checkout con 3DS.                          */
#hiddenSubmit { display: none !important; }
/* ══════════════════════════════════════════════════════════════════════════
   Checkout — retoques del 26-ago-2026
   ══════════════════════════════════════════════════════════════════════════ */

/* Resumen del pedido en la pantalla de pago (datos: hook gs_resumen_checkout.php).
   Antes solo se veia el total: el cliente pulsaba «Completar pedido» sin tener
   delante que estaba comprando. */
.gs-resumen-pedido {
  border: 1px solid #e3e8ee;
  border-radius: var(--gs-radius-sm);
  background: var(--gs-light-bg);
  padding: 14px 18px;
  margin: 0 0 14px;
}
.gs-resumen-titulo {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #6b7a8c; margin-bottom: 8px;
}
.gs-resumen-lista { list-style: none; margin: 0; padding: 0; }
.gs-resumen-lista li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.06);
}
.gs-resumen-lista li:last-child { border-bottom: 0; }
.gs-resumen-nombre  { font-weight: 600; color: var(--gs-heading); }
.gs-resumen-detalle { color: var(--gs-blue); }
.gs-resumen-ciclo   { margin-left: auto; font-size: 13px; color: #6b7a8c; }
.gs-resumen-editar  { display: inline-block; margin-top: 10px; font-size: 13px; }

/* «Notas adicionales» plegado: ocupaba un tercio de la pantalla. */
.gs-notas { margin: 14px 0; }
.gs-notas-toggle {
  cursor: pointer; font-size: 13px; color: var(--gs-blue);
  padding: 6px 0; list-style: none; user-select: none;
}
.gs-notas-toggle::-webkit-details-marker { display: none; }
.gs-notas-toggle::before { content: "＋ "; font-weight: 700; }
.gs-notas[open] .gs-notas-toggle::before { content: "－ "; }

/* Que pasa despues de pagar. */
.gs-tras-pagar {
  margin: 12px auto 0; max-width: 460px;
  font-size: 13px; line-height: 1.5; color: #5a6b7d; text-align: center;
}
.gs-tras-pagar i { color: var(--gs-orange); margin-right: 5px; }

/* La descripcion del plan ya no es un muro de texto: ahora lleva listas. */
.gs-product-desc { font-size: 14px; line-height: 1.6; }
.gs-product-desc ul { margin: 6px 0 14px; padding-left: 20px; }
.gs-product-desc li { margin-bottom: 4px; }
.gs-product-desc p:last-child {
  margin-top: 14px; padding: 10px 14px;
  background: var(--gs-light-bg); border-left: 3px solid var(--gs-orange);
  border-radius: 0 var(--gs-radius-sm) var(--gs-radius-sm) 0;
}

/* CTA del carrito unificado: el «Continuar» del configurador y del selector de
   dominio salian en azul apagado y parecian desactivados, mientras el resto del
   embudo va en naranja. Solo color — NUNCA `display` con !important aqui
   (asi se destapo el boton «Save Changes» de Stripe). */
#order-standard_cart .btn-checkout,
#order-standard_cart #btnContinueProductConfig,
#order-standard_cart .cart-btn-continue,
#order-standard_cart #btnDomainContinue,
#order-standard_cart .btn-primary.btn-lg,
#order-standard_cart button[type="submit"].btn-primary {
  background: var(--gs-orange) !important;
  border-color: var(--gs-orange) !important;
  color: #fff !important;
}
#order-standard_cart .btn-checkout:hover,
#order-standard_cart #btnContinueProductConfig:hover,
#order-standard_cart .cart-btn-continue:hover,
#order-standard_cart #btnDomainContinue:hover,
#order-standard_cart .btn-primary.btn-lg:hover,
#order-standard_cart button[type="submit"].btn-primary:hover {
  background: var(--gs-orange-hover) !important;
  border-color: var(--gs-orange-hover) !important;
}

/* Aviso al elegir dominio propio: esa opcion deja sin efecto el dominio gratis. */
.gs-aviso-dominio-propio {
  margin: 8px 0 0 26px; padding: 8px 12px;
  background: #fff8e6; border-left: 3px solid #f0ad4e;
  border-radius: 0 4px 4px 0; font-size: 13px; color: #6b5a2e;
}

/* Fila de «Utilizaré mi dominio existente»: los tres controles a la misma altura.
   Medido el 26-ago-2026: prefijo «www.» 42px, campo del dominio 42px, campo del
   TLD 34px y boton «Usar» 35px — se veian escalonados. Se igualan a 42.
   Nada de !important sobre `display` aqui (ver #hiddenSubmit). */
#domainowndomain .input-group-addon,
#domainowndomain .input-group-prepend,
#domainowndomain input.form-control,
#domainowndomain .btn {
  height: 42px;
  line-height: 21px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
}
#domainowndomain .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}
#domainowndomain .input-group-addon,
#domainowndomain .input-group-prepend {
  display: inline-flex;
  align-items: center;
}