/* ==========================================================================
   GoServix Branding - WHMCS Twenty-One
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&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: 1290px;

}
/* ==========================================================================
   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: 1320px !important; margin: 0 auto !important; padding: 0 15px !important; }
.gs-footer-columns { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr !important; gap: 40px !important; padding: 60px 30px !important; max-width: 1290px !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; }
.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-top: 40px !important; border-top: 1px solid rgba(255,255,255,0.1) !important; padding: 25px 0 !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; }

}

/* ==========================================================================
   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
   ========================================================================== */

/* Only the TOP-LEVEL row (sidebar + content) should be nowrap */
/* Inner rows should wrap normally */
.primary-content > .row {
    display: flex !important;
    flex-wrap: nowrap !important;

}

/* Reset: all other nested rows should behave normally */
.primary-content .row .row,
.secondary-cart-body .row,
.cart-body .row {
    display: flex !important;
    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 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 */
.form-group.prepend-icon input.form-control {
    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"] {
  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: 1290px !important;
}